如何使用Javascript为一个元素设置多个样式

尝试创建一个名为container的自定义div，并且我无法使样式正常工作，实际上第33-39行禁止第41行工作。我尽力让container div显示出来，但没有运气。请帮忙，谢谢。如何使用Javascript为一个元素设置多个样式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"><head> 
</head> 
<style> 
body 
{  
    background-repeat:repeat; 
    background-color: white;  
} 
#container 
{  
    position: relative; 
    margin: 0 auto;  
} 
#p_1 
{ 
    font-style:italic; 
    font-size: 50px; 
    font-color: black; 
} 
#p_2 
{ 
    font-style:italic; 
    font-size: 50px; 
    font-color: black; 
} 
</style> 
<script language = "JavaScript"> 
function initialize_container(container) 
{ 
    document.getElementById("p_1").innerHTML = "<p> output p1 </p>"; 

    var CONTAINER_TAG = document.getElementById("container"); 
    CONTAINER_TAG.setAttribute("style", "width: 100px;"); 
    CONTAINER_TAG.setAttribute("style", "heigth: 100px;");  
    CONTAINER_TAG.setAttribute("style", "border: 2px solid;"); 
    CONTAINER_TAG.setAttribute("style", "border-radius: 25px;");  
    CONTAINER_TAG.setAttribute("style", "border-style: solid;");  
    CONTAINER_TAG.setAttribute("style", "border-color: purple;"); 

    document.getElementById("p_2").innerHTML = "<p> output p2 </p>"; 
} 
</script> 
<body onload = "initialize_container('container')"> 
    <div id = "container">      
     <p id = "p_1"></p> 
     <p id = "p_2"></p> 
    </div> 
</body> 
</html>

来源

2014-02-05 pandoragami

每次调用setAttribute时，都重写'style'属性。它们不是添加剂。 – crush

所以我必须把所有东西放在'setAttribute'中一次..，好的。 – pandoragami

是的，这就是为什么它是'set'操作=] – crush

您每次拨打电话setAttribute时只是覆盖样式属性。它不是添加剂。请只需一个电话setAttribute各具风格一起

尝试更换此：

CONTAINER_TAG.setAttribute("style", "width:" + 100 + "px;");  
    CONTAINER_TAG.setAttribute("style", "heigth:" + 100 + "px;");  
    CONTAINER_TAG.setAttribute("style", "border: 2px solid;"); 
    CONTAINER_TAG.setAttribute("style", "border-radius: 25px;");  
    CONTAINER_TAG.setAttribute("style", "border-style: solid;");  
    CONTAINER_TAG.setAttribute("style", "border-color: purple;");

与此：

CONTAINER_TAG.setAttribute("style", "width:100px;heigth:100px;border: 2px solid;border-radius:25px;border-style: solid;border-color: purple;");

DEMO

也只是在寻求这样的：

document.getElementById("p_1").innerHTML = "<p> output p1 </p>";

您确定要将p元素放入p_1元素中。也许你想

document.getElementById("p_1").innerHTML = "output p1";

来源

2014-02-05 18:11:48 laaposto

你说得对，我不知道'setAttribute'不是加法的。 – pandoragami

而不是一次又一次地设置属性，改变该元素的风格。

CONTAINER_TAG.style.width = "100px"; 
CONTAINER_TAG.style.heigth = "100px";  
CONTAINER_TAG.style.border = "2px solid purple"; 
CONTAINER_TAG.style.borderRadius = "25px";

提示：

有一件事我注意到的是，你是路过的div id作为该函数的参数，所以

var CONTAINER_TAG = document.getElementById("container");

应该是var CONTAINER_TAG = document.getElementById(container);

希望，这有助于...

来源

2014-02-05 18:12:21

但是线程的主题是使用DOM创建自定义div。 – pandoragami

@ user2555139这是真的...... – crush

但是如果你看到并且写入的代码看起来不像他/她想要创建该元素，那么div id'container'已经存在于DOM中，而是关于更新该特定元素。 –

通过这个过程，您也可以为特定元素提供syle。

CONTAINER_TAG.style.width = "500px"; 
CONTAINER_TAG.style.height = "100px"; 
CONTAINER_TAG.style.border = "4px solid green";

来源

2014-02-05 18:12:42

如何使用Javascript为一个元素设置多个样式

回答

相关问题