一次更改多个CSS属性
Change multiple CSS attributes at once
我想知道是否可以用一行更改元素的多个CSS属性?
现在,如果我有一个元素并尝试更改一些CSS属性,那么我必须为每个CSS属性写一行代码。例如:
$("div#start").click(function(){
$("p#message").css("background-color", "red");
$("p#message").css("color", "white");
$("p#message").css("padding", "5px");
$("p#message").css("width", "120px");
$("p#message").css("text-align", "center");
});
div#start {
background-color: #D8D8D8;
border: 1px solid black;
width: 50px;
text-align: center;
}
div#start:hover {
cursor: pointer;
background-color: #A1A1A1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="message">Hi Folks</p>
<div id="start">Change CSS</div>
正如你在上面的例子中看到的,我为每个CSS属性写一行。是否可以通过一个命令来实现这一点?例如:
$("p#message").css(
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
);
将对象传递给css()
。代码缺少{
和}
。
$("p#message").css({
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
});
由于样式是固定的,我建议创建一个CSS类并添加该类。
$("p#message").addClass('myClass');
CSS:
.myClass {
background: red;
color: white;
padding: 5px;
width: 120px;
text-align: center
}
使用对象作为设置多个CSS属性的参数。
$("p#message").css({
"background-color":"red",
"color":"white",
"padding":"5px",
"width":"120px",
"text-align":"center"
});
您可以这样写一行:
$("p#message").css("background-color","red").css("color","white").css("padding","5px").css("width","120px").css("text-align","center");
}
相关文章:
- 谷歌图表-如何更改整个表的css属性
- 将css属性替换为变量
- 使用Jquery/Javascript替换CSS属性
- 如何使用JavaScript查找未定义的CSS属性的值
- 在jquerymobile中设置按钮css属性的动画
- JavaScript无法提取引号css属性
- 使用AngularJS动态更改css属性
- 使用javascript获取具有特定CSS属性的所有元素
- 将css属性添加到对象的集合中
- 取消img的css属性宽度和高度(不能使用“auto”)
- CSS属性更改侦听器
- 如何更改与Backbone集合中的模型相关联的几个元素的css属性
- 如何使用java脚本或jQuery基于相同的特定css属性对元素进行分组
- 如何在不链接/jquery的情况下使用方法应用css属性数组
- 在 javascript css 属性中使用变量
- 在jQuery中链接时CSS属性不起作用
- jQuery检查CSS宽度是否大于0,然后添加CSS属性
- 使用循环增加css属性值
- 更改类所选空输入的CSS属性
- 无法查找元素'手动加载CSS文件时的CSS属性