这篇文章主要介绍“.css(propertyName)怎么使用”,在日常操作中,相信很多人在.css(propertyName)怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”.css(propertyName)怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
描述: 获取匹配元素集合中的第一个元素的样式属性的值
添加的版本: 1.0.css( propertyName )
propertyName
类型: String
一个css属性名。
添加的版本: 1.9.css( propertyNames )
propertyNames
类型: Array
一个或多个CSS属性组成的一个数组
.css()方法可以非常方便地获取匹配的元素集合中第一个元素的样式属性值, 对于某些属性而言,浏览器访问样式属性的方式是不同的,该方法对于取得这些属性是非常方便的(例如, 某些属性在标准浏览器下是通过的 getComputedStyle() 方法取得的,而在Internet Explorer下是通过currentStyle 和 runtimeStyle属性取得的)并且,某些特定的属性,不同浏览器的写法不一。举个例子, Internet Explorer的DOM 将float 属性写成 styleFloat实现,W3C标准浏览器将float 属性写成cssFloat。 为了保持一致性,您可以简单地使用"float",jQuery将为每个浏览器返回它需要的正确值。
另外,jQuery同样可以解析 CSS 和 用multiple-word格式化(用横杠连接的词,比如:background-color)的DOM属性的不同写法。举个例子:jQery能解析.css('background-color') 和 .css('backgroundColor')并且返回正确的值。不同的浏览器可能会返回CSS颜色值在逻辑上相同,但在文字上表现不同,例如: #FFF, #ffffff, 和 rgb(255,255,255)。
简写速写的CSS属性(例如: margin, background, border) 是不支持的,例如,如果你想重新获取margin,可以使用$(elem).css('marginTop') 和 $(elem).css('marginRight'),其他的也是如此。
从jQuery 1.9开始, 传递一个CSS的样式属性的数组给.css()将返回 属性 - 值 配对的对象。例如,要获取元素4个边距宽度值border-width,你可以使用$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
例子:
Example: 点击div,得到它的背景颜色
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
</script>
</body>
</html>
到此,关于“.css(propertyName)怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。