CreateTime--2017年10月31日15:14:12

Author:Marydon

js改变css样式

1.js改变单个css样式

  HTML部分

<div id="test" style="display:none">测试js改变单个css样式</div>

  JAVASCRIPT部分

document.getElementById('test').style.display = 'none';

2.js改变多个css样式

  HTML部分

<div id="test">测试js改变多个css样式</div>

  方法一:通过操作style属性实现

$get("test").style.height = '100px';
$get("test").style.width = '100px';
$get("test").style.border = '1px solid red';

  方法二:通过cssText属性实现(推荐使用)

$get("test").style.cssText = "height:100px;width:500px;border:1px solid red;";

  说明:需要通过js改变多个css样式时,推荐使用第二种方式

  注意:使用cssText有2个注意事项

  a.会覆盖之前的样式;

  举例:

<div id="test" style="height:100px;width:500px;border:1px solid red;">测试cssText</div>

  效果:想在此基础上加个背景色

$get("test").style.cssText = "background-color:yellow;"  

  结果:但是实现效果却是加上了背景色,其他样式被覆盖掉了

  b.ie8及ie8以下结尾没有分号。

  通过cssText属性给标签设置行内样式时, ie8及ie8以下浏览器会自动去掉样式中的最后一个封号

  解决方案:使用cssText时应该采用叠加的方式以保留原有的样式  

var cssText = $get("test").style.cssText;
// 不以;号结尾
if(cssText.lastIndexOf(';') != cssText.length - 1) {
cssText += ";"
}
cssText += "background-color:yellow;color:green;";
// 追加多个样式
$get("test").style.cssText = cssText; 

小结:

  使用js改变单个css样式,通过调用style属性来实现;

  使用js改变多个css样式,通过调用cssText属性来实现,注意避免bug的出现。

3.js改变名称带有-的样式

  使用javascript操作CSS样式时,遇到样式名称中带有-的,第二个首字母大写即可  

$get("test").style.backgroundColor = "yellow";
 

js改变css样式的更多相关文章

  1. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  2. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  3. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  4. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  5. jQuery基础 - 改变CSS样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  6. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  7. 改变CSS样式

    改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...

  8. JQuery - 改变css样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  9. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. hnust 不爱学习的小w

    问题 C: 不爱学习的小W 时间限制: 2 Sec  内存限制: 64 MB提交: 1431  解决: 102[提交][状态][讨论版] 题目描述 “叮铃铃”上课了,同学们都及时到了教室坐到了座位上, ...

  2. IO Streams:格式化

    简介 实现格式化接口的流对象是PrintWriter,字符流类或PrintStream(字节流类). 注意:您可能唯一需要的PrintStream对象是System.out和System.err. ( ...

  3. java2 实用教程第四章

    博主原创 转载请注明地址 博客:http://www.cnblogs.com/13224ACMer/ 1成员变量 声明变量所声明的变量被称为成员变量和域变量,成员变量在类中的书写位置与前后顺序无关, ...

  4. 九度oj 题目1482:玛雅人的密码 清华大学机试

    题目描述: 玛雅人有一种密码,如果字符串中出现连续的2012四个数字就能解开密码.给一个长度为N的字符串,(2=<N<=13)该字符串中只含有0,1,2三种数字,问这个字符串要移位几次才能 ...

  5. 【转】[重构]Primitive Obsession

    http://blog.csdn.net/wxr0323/article/details/7913950 Primitive Obsession(基本类型偏执) 偏执这个词实在是有点难懂.百度百科传送 ...

  6. pytorch conditional GAN 调试笔记

    推荐的几个开源实现 znxlwm 使用InfoGAN的结构,卷积反卷积 eriklindernoren 把mnist转成1维,label用了embedding wiseodd 直接从tensorflo ...

  7. kb-07线段树-12--二分查找区间边界

    /* hdu4614 本题刚开始想能不能记录该区间最前面开始的点,最后面的点,区间空的数量:但是病不行 然后线段树的本质是区间操作,所以!这题主要就是区间的空的全放满,只要定出区间的边界就好办了: 这 ...

  8. 百度网络监控实战:NetRadar横空出世(下)

    原文:https://mp.weixin.qq.com/s/CvCs-6rX8Lb5vSTSjYQaBg 转自订阅号「AIOps智能运维」,已授权运维帮转发 作者简介:运小贝,百度高级研发工程师 负责 ...

  9. tyvj 2020 rainbow 的信号

    期望 被精度坑惨的我 注意:能开 long long 尽量开, 先除后乘, int 转 double 的时候 先转换在做运算 本题与位运算有关,位与位之间互不影响,所以我们可以分开考虑 #includ ...

  10. 学习javascript设计模式之中介者模式

    1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合 ...