jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/112189175，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

在 jQuery 中，使用 css 方法可以设置元素的 CSS 样式。

一、获取元素的样式

在原生的 JS 中，需要使用 getComputedStyle() 方法来获得元素的样式值，例如：

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.a {width: 200px;height: 200px;transition: 0.7s;}.b {background: #ccc;}.c {box-shadow: 0 0 10px black;}</style><script src="jquery-1.12.4.js"></script><script type="text/javascript">onload = function (){console.log(getComputedStyle(mydiv)['backgroundColor']);console.log(getComputedStyle(mydiv)['width']);}</script>
</head>
<body><div id='mydiv' class="a b"></div>
</body>
</html>

在 jQuery 中，将原生的方法封装到 css() 方法中，所以可以直接使用 css() 方法来获取元素属性：

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.a {width: 200px;height: 200px;transition: 0.7s;}.b {background: #ccc;}.c {box-shadow: 0 0 10px black;}</style><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){console.log($('#mydiv').css('width'));console.log($('#mydiv').css('backgroundColor'));})</script>
</head>
<body><div id='mydiv' class="a b"></div>
</body>
</html>

需要注意的一点，css() 方法获取元素属性值时，如果元素的属性值单位是 cm 时，则会自动转换为 px；

二、设置元素的样式

使用 css() 方法可以为元素设置单个样式：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('#mydiv').css('width','100px');})</script>
</head>
<body><div id='mydiv'></div>
</body>
</html>

如果要设置多个样式，可以使用链式调用的方法：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('#mydiv').css('width','100px').css('height','100px').css('background','red');})</script>
</head>
<body><div id='mydiv'></div>
</body>
</html>

不过链式调用的方法过于麻烦，所以还可以使用传递 JSON 对象的方式：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('#mydiv').css({'width':'100px','height':"100px",'background':'#ccc'});})</script>
</head>
<body><div id='mydiv'></div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/112189175，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式相关推荐

用jQuery设置元素的css样式
什么是jQuery ,jQuery 是能用少量的代码写出JavaScript的效果. 学习jQuery 要有一定的JavaScript.CSS.HTML的基础: jQuery 库位于一个 JavaSc ...
JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
JQuery学习22篇(事件委托)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
jQuery学习（三）—jQuery使用步骤以及注意事项
jQuery学习(三)-jQuery使用步骤以及注意事项 jQuery的使用步骤: 第一步:利用script标签将jQuery文件引入到当前的HTML中第二步:在文档中插入一个新的script标签在 ...
jQuery学习（六）—jQuery对象的创建
jQuery学习(六)-jQuery对象的创建
jQuery学习（二）—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅甘肃蚤缀.垫状棘豆垫状驼绒藜 ...
jq获取和设置标签的css样式、jq给标签增加或移除class属性
1.jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式,也可以设置样式,包括行内.内部.外部样式: 思路:先要选取这个标签,然后再获取或者设置样式: 获取css属性: ...

jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

一、获取元素的样式

二、设置元素的样式

jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式相关推荐

最新文章

热门文章