jquery添加css无效 |
您所在的位置:网站首页 › jquery修改css样式无效 › jquery添加css无效 |
样式操作,指的是使用 jQuery 来操作一个元素的 CSS 属性。 在 jQuery 中,对于样式操作共有以下 3 种: CSS 属性操作; CSS 类名操作; 个别样式操作。 在 jQuery 中,CSS 属性的操作有两种情况:一种是“获取属性”,另一种是“设置属性”。 jQuery css()方法获取属性值 在 jQuery 中,我们可以使用 css() 方法来获取某一个元素的 CSS 属性的取值。 语法: $().css("属性名") 举例: p{font-weight:bold;} $(function () { $("#btn").click(function(){ var result = $("p").css("font-weight"); alert("font-weight取值为:" + result); }); }) C语言中文网 预览效果如图 1 所示。 图 1:默认效果 $("p").css("font-weight")表示获取 p 元素的 font-weight 属性值。我们点击【获取】按钮后,浏览器会弹出对话框,如图 2 所示。 图 2:对话框 jQuery css()方法设置属性 在 jQuery 中,设置某一个元素的 CSS 属性的值,我们用的也是 css() 方法。不过对于 css() 方法,我们需要分两种情况来考虑:一种是“设置一个属性”,另一种是“设置多个属性”。 语法: //设置一个属性 $().css("属性", "取值") //设置多个属性 $().css({"属性1":"取值1", "属性2":"取值2", ..., "属性n":"取值n"}) 当我们想要设置多个 CSS 属性时,使用的是对象的形式。其中属性与取值采用的是“键值对”方式,每个“键值对”之间用英文逗号隔开。 举例:设置一个属性 $(function (){ $("#btn").click(function(){ $("li:nth-child(odd)").css("color","red"); }); }) HTMLCSSJavaScriptjQueryVue.js默认情况下,预览效果如图 3 所示。 图 3:默认效果 我们点击【设置】按钮后,预览效果如图 4 所示。 图 4:点击按钮后效果 $("li:nth-child(odd)").css("color","red")这句代码使用了“子元素”伪类选择器,表示选取 ul 元素下所有序号为“奇数”(序号从 1 开始)li 元素,然后设置 color 属性值为 red。 实际上,下面两句代码是等价的。 $().css("color","red") $().css({"color": "red"}) 举例:设置多个 CSS 属性 $(function (){ $("#btn").click(function(){ $("li:nth-child(odd)").css({"color":"red", "background-color":"silver", "font-weight":"bold"}); }); }) HTMLCSSJavaScriptjQueryVue.js默认情况下,预览效果如图 5 所示。 图 5:默认效果 我们点击【设置】按钮后,预览效果如图 6 所示。 图 6:点击按钮后效果 分析: $()css({"color":"red", "background-color":"silver", "font-weight":"bold"}); 上面这句代码其实可以等价于: $().css("color", "red); $().css("background-color", "silver"); $().css("font-weight", "bold"); |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |