jquery实现动态改变css样式的方法_F11 - 专业站长和开发者的学习网站

分享到

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

jquery 来源：互联网搜集作者：秩名发布时间：2019-05-27 18:41:34 人浏览

摘要

本篇文章介绍jquery实现动态改变css样式的方法。 jquery 几乎成了现在开发WEB应用的标准JS库，这与其简单性和易用性是分不开的。作为一个后端开发人员，要做一些前端页面时，CSS 样式的控制是少不了需要掌握的。如果是静态的CSS，当然是可以直接写上去的，

本篇文章介绍jquery实现动态改变css样式的方法。

jquery 几乎成了现在开发WEB应用的标准JS库，这与其简单性和易用性是分不开的。作为一个后端开发人员，要做一些前端页面时，CSS 样式的控制是少不了需要掌握的。

如果是静态的CSS，当然是可以直接写上去的，但有些界面是需要一些动态效果的，比如颜色变化，字体大小变化，甚至DIV 的隐藏于现实等，这些都需要用javascript 动态控制其CSS样式。

下面就常用的jquery 控制 css 样式的方法做一个小结.

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

一、改变超级链接的样式

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

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

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

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

然后用jquery 赋值

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

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

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

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

三、查看元素的CSS样式

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

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

直接修改CSS方式

$('#mydiv').attr('style','display:none;');//隐藏
$('#mydiv').attr('style','display:block;');//显示

您可能感兴趣的文章 :

原文链接 : http://www.yihaomen.com/article/js/276.htm

Tag : 动态(13)jQuery(160)css(220)样式(4)

jquery实现员工管理注册页面的代码

HTML页面代码 body div class=container h2 class=text-center用户注册/h2 form action=Baidu.html method=post class=form-horizontal div class=form-group label for=username class=
jquery实现两个div中的元素相互拖动的方法介绍

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中：拖动完成后：代码实现： ? 1 2
jquery添加div实现消息聊天框代码

代码如下： htmlheadstyle* { margin: 0; padding: 0;} .border { margin-left: 300px; width: 900px; background-color: white; position: relative; border: 1px solid rgb(221, 221, 221
jQuery实现验证用户登录

内容显示效果输入之前输入之后点击校验废话少说，先上代码： HTML代码： !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead meta http-equiv=Conte
html+jQuery实现拖动滑块图片拼图验证码插件（移动

电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前
Jquery实现获取子元素的方法

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取
jQuery实现的记住帐号密码功能方法

本篇文章介绍jQuery实现的记住帐号密码功能方法记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。 !D
JavaScript实现的弹出遮罩层特效经典示例【基于

本篇文章介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】效果图：代码： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title查看，修改，
Laravel admin实现消息提醒、播放音频功能

本篇文章介绍Laravel admin实现消息提醒、播放音频功能 1.找到laravel-admin 中的 index.blade.php 文件进行编辑 {{-- 音频通知 --}}audio style=display:none
jQuery属性选择器用法实例

本篇文章介绍jQuery属性选择器用法实例属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute) input id=txtUsername type=text