jquery怎么动态修改css样式-js教程-PHP中文网

jquery怎么动态修改css样式

藏色散人

发布： 2021-07-05 14:05:23

原创

2312人浏览过

jquery动态修改css样式的方法：1、通过css方法动态修改css样式；2、给指定的html元素定一个css样式；3、查看元素的css样式；4、隐藏与显示p或指定的其他html元素。

jquery怎么动态修改css样式

本文操作环境：windows7系统、jquery3.2.1版、Dell G3电脑。

jquery实现动态改变css样式的方法。

具体如下：

jquery 几乎成了现在开发WEB应用的标准JS库，这与其简单性和易用性是分不开的。作为一个后端开发人员，要做一些前端页面时，CSS 样式的控制是少不了需要掌握的。如果是静态的CSS，当然是可以直接写上去的，但有些界面是需要一些动态效果的，比如颜色变化，字体大小变化，甚至p 的隐藏于现实等，这些都需要用javascript 动态控制其CSS样式，下面就常用的jquery 控制 css 样式的方法做一个小结.

1. 改变超级链接的样式
2. 给指定的html元素给一个指定的CSS 样式
3. 查看元素的css样式
4. 隐藏与显示p或指定的其他html元素

一、改变超级链接的样式

$("#mylink a").css(&#39;color&#39;,&#39;#111111&#39;);
//这里选择器‘$("#mylink a")&#39;表示ID为&#39;#mylink&#39;的元素下的所有链接。
//.css(‘color&#39;,&#39;#111111&#39;);表示把颜色设为&#39;#111111&#39;

登录后复制

二、给指定的html元素指定一个已经定义好的CSS 样式

1. 你可以在外部css文件中建立一个css样式，比如

.mystyle{width:200px;height:100px;}

登录后复制

然后用jquery 赋值

$("#result").css(mystyle);

登录后复制

2. 可以定义一个css对象（也就是javascript对象），然后赋值

var pcss = {
 background: &#39;#EEE&#39;,
   width: &#39;478px&#39;,
   margin: &#39;10px 0 0&#39;,
   padding: &#39;5px 10px&#39;,
   border: &#39;1px solid #CCC&#39;
};
$("#result").css(pcss);

登录后复制

这种方式类似于外部链接方式，个人推荐外部链接方式.

三、查看元素的CSS样式

var mycolor=$("#mylink a").css("color");
if ($(&#39;#myp&#39;).css(&#39;display&#39;)=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

登录后复制

四、隐藏于显示p或其他元素

1.直接修改CSS方式

$(&#39;#myp&#39;).attr(&#39;style&#39;,&#39;display:none;&#39;);//隐藏
$(&#39;#myp&#39;).attr(&#39;style&#39;,&#39;display:block;&#39;);//显示

登录后复制

推荐学习：《jquery视频教程》

以上就是jquery怎么动态修改css样式的详细内容，更多请关注php中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

jquery怎么动态修改css样式