jQuery css() 方法
jQuery可以使用css()方法来修改简单元素样式;也可以操作类,修改多个样式
css() 方法设置或返回被选元素的一个或多个样式属性
①设置css属性
css()接收的参数是属性名和属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。请使用如下语法:
css("propertyname","value");
<htmllang="en"><head><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title></head><body><p>这是一个p标签</p></body><script>$('p').css("color", "red"); </script></html>
以上代码设置一个p标签,用css()方法设置字体颜色为红色
②设置多个css属性
css()方法的参数可以是对象形式,方便设置多组样式。样式名和样式值用冒号隔开,样式名可以不用加引号。请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});
<htmllang="en"><head><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title></head><body><p>这是一个p标签</p></body><script>$('p').css({ color:'red', border: '1px solid black', fontStyle:'italic' }); </script></html>
给p标签设置样式为红色字体,实线边框1px,字体为斜体
③获取样式/返回 CSS 属性
css()方法接收参数时只写样式名,则返回样式值。请使用如下语法:
css("propertyname");
<htmllang="en"><head><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title><style>p{ color: red; } </style></head><body><p>这是一个p标签</p></body><script>vara=$('p').css("color"); console.log('返回的颜色是'+a); </script></html>
设置一个p标签,设置字体颜色为红色(red),获取p元素的color并在控制台中输出结果。
❗注意返回颜色的值不是原本设置的red,而是该颜色的rgb模式的颜色值
涉及jQuery css()方法的例题
(多选题)14、在jQuery中,通过jQuery对象.css( )可实现样式控制,以下说法正确的是( AB )
A、 css( )方法会去除原有样式而设置新样式
B、 正确语法:css(“属性”,”值”)
C、 css( )方法不会去除原有样式
D、 正确语法:css(“属性”)
通过上面对于css()方法的学习后,我们可以很明确的排除CD这两个错误答案。