css 使用JavaScript添加多个样式

xuo3flqw 于 2023-04-13 发布在 Java

关注(0)|答案(7)|浏览(175)

我想用JavaScript添加多行CSS。我知道我可以做到这一点：

document.getElementById(id).style.property=new style

如：

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

但是，上面的代码允许我只添加一个CSS属性。如果想添加多个属性，像这样：

#id1 {
    color: red;
    background-color: beige;
    padding-bottom: 2px;
    margin: 3px;
}

我如何通过不重复来添加所有这些：

document.getElementById(id).style.property=new style

....一次又一次。提前感谢！

css

来源：https://stackoverflow.com/questions/36262756/add-multiple-styles-with-javascript

7条答案

按热度按时间

xfb7svmp1#

document.getElementById("id1").setAttribute(
  "style", "color: green; background-color: beige; padding-bottom: 2px; margin: 3px;");

<body>
  <h1 id="id1">My Heading 1</h1>
  <button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>

这是一个fiddle.

赞(0）回复(0）举报 2023-04-13

5cg8jx4n2#

是的，你可以像这样用JavaScript添加多个CSS
你按钮

<input id="myButton" type="button" value="Hello">

和它的JavaScript

document.getElementById('myButton')
  .style.cssText = "color: blue; width: 100px; height: 55px; border: 1px solid red;";

赞(0）回复(0）举报 2023-04-13

flseospp3#

为什么不添加一个已经定义了所有属性的类呢？

document.getElementById(id).classList.add('new_class')

赞(0）回复(0）举报 2023-04-13

pbgvytdp4#

如果你的样式是动态生成的，你不能简单地添加一个新的CSS类到这个元素中，你可以这样做，使用你发布的相同的想法，但以DRY的方式编码。
如果您的元素已经应用了一些样式，并且您不想覆盖它们，那么这也很有用。
单击下面的 * 运行代码片段 * 查看演示。

var id  = "content";

var styles = { 
  'color': 'red',
  'background-color': 'beige',
  'padding-bottom': '2px',
  'margin': '3px'
};

var elementStyle = document.getElementById(id).style;
for(var styleName in styles) {
  elementStyle[styleName] = styles[styleName];
}

<div id="content">
  This is a test
</div>

赞(0）回复(0）举报 2023-04-13

hjqgdpho5#

document.getElementById('the_object_ID')
  .setAttribute( 'style', 'color:white; margin:20px;');

赞(0）回复(0）举报 2023-04-13

vatpfxk56#

你可以创建一个函数

<button type="button" onclick="myFunc('id1')"> Click Me! </button>

在js中

function myFunc(id){
    var myDiv = document.getElementById(id);
    myDiv.style.color = 'red';
    myDiv.style.backgroundColor = "beige"; 
    myDiv.style.paddingBottom = "2px";
    myDiv.style.margin = "3px";
}

赞(0）回复(0）举报 2023-04-13

a6b3iqyw7#

最简单的答案是使用.style，如下所示：

document.getElementById("id1").style = "height:30px; width:30px; background-color:red;"

赞(0）回复(0）举报 2023-04-13

我来回答

css 使用JavaScript添加多个样式

7条答案

相关问题

热门标签

最新问答