Question

自从我尝试编写一个简单的HTML / CSS / JS页面以来，已经过了几个小时，但是，我无法找到解决方案。

基本上，我只需要这样做：

我正在尝试使用CSS样式（如border，padding等）生成一个新的复选框，但无论我做什么，CSS样式都不起作用。

以下是我正在使用的代码：

 

    function addItem() {

    var text = document.getElementById('texto');

    if (text.value == "") {
        alert("Please enter something first!");
    } else {

        var ul = document.getElementById('ul'); //ul
        //var li = document.createElement('li');//li

        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.value = 1;
        checkbox.name = "todo[]";
        //checkbox.className = "cb";
        //checkbox.style.border = "1px solid black";


        checkbox.setAttribute("style", "background-color:red; font-size:2em; border: 1px solid black");

        /*var att = document.createAttribute("style");
         att.value = "border: 1px solid black;";
         checkbox.setAttributeNode(att);*/


        //var h1 = document.getElementsByTagName("H1")[0];

        //document.getElementsByClassName("cb").style.backgroundColor = "red";

        ul.appendChild(checkbox);


        ul.appendChild(document.createTextNode(text.value));
        //ul.appendChild(ul); 

    }

}
var button = document.getElementById('btn');
button.onclick = addItem;

<html>
	<head>

	</head>
	<body>

<button type="button" id="btn">Add Milestones</button>
<input type="text" id="texto">

<div id="ul" style="padding: 20px;">
	
</div>

</body>
</html>

Answer 1

＆＃13;

function addItem(){		
    var text = document.getElementById('texto');
    
    if ( text.value == "" ) {
        alert("Please enter something first!");
    } else {
        
        var ul = document.getElementById('ul'); //ul
        //var li = document.createElement('li');//li
        
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.value = 1;
        checkbox.name = "todo[]";
        //checkbox.className = "cb";
        //checkbox.style.border = "1px solid black";
        var label = document.createElement('label');
        label.append(checkbox);
        label.setAttribute("style", "background-color:red; font-size:2em; border: 1px solid black");
        
        /*var att = document.createAttribute("style");
        att.value = "border: 1px solid black;";
        checkbox.setAttributeNode(att);*/

        
        //var h1 = document.getElementsByTagName("H1")[0];
        
        //document.getElementsByClassName("cb").style.backgroundColor = "red";

        ul.appendChild(label);
        
        
        ul.appendChild(document.createTextNode(text.value));
        //ul.appendChild(ul); 
    
    }
        
}
var button = document.getElementById('btn');
button.onclick = addItem;

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<button type="button" id="btn">Add Milestones</button>
<input type="text" id="texto">

<div id="ul" style="padding: 20px;">

</div>

</body>
</html>

＆＃13;

Answer 2

我不认为这是最好的解决方案，但这有效

 function addItem() {

        var text = document.getElementById('texto');

        if (text.value == "") {
            alert("Please enter something first!");
        } else {

            var ul = document.getElementById('ul'); //ul
            //var li = document.createElement('li');//li

            var checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.value = 1;
            checkbox.name = "todo[]";
            //checkbox.className = "cb";
            //checkbox.style.border = "1px solid black";

            var div = document.createElement('div');
            div.appendChild(checkbox);
            div.setAttribute("class", "check");
            /*var att = document.createAttribute("style");
             att.value = "border: 1px solid black;";
             checkbox.setAttributeNode(att);*/


            //var h1 = document.getElementsByTagName("H1")[0];

            //document.getElementsByClassName("cb").style.backgroundColor = "red";

            ul.appendChild(div);

            div.appendChild(ul.appendChild(document.createTextNode(text.value)));
            
            //ul.appendChild(ul);

        }

    }
    var button = document.getElementById('btn');
    button.onclick = addItem;

 .check {
            background-color: red;
            font-size: 2em;
            border: 1px solid black;
            padding: 10px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<button type="button" id="btn">Add Milestones</button>
<input type="text" id="texto">

<div id="ul" style="padding: 20px;">

</div>

</body>
</html>

使用CSS样式

2 个答案: