js改变css样式
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样式的更多相关文章
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- jQuery基础 - 改变CSS样式
jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...
- jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 ...
- 改变CSS样式
改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...
- JQuery - 改变css样式
jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
- hnust 不爱学习的小w
问题 C: 不爱学习的小W 时间限制: 2 Sec 内存限制: 64 MB提交: 1431 解决: 102[提交][状态][讨论版] 题目描述 “叮铃铃”上课了,同学们都及时到了教室坐到了座位上, ...
- IO Streams:格式化
简介 实现格式化接口的流对象是PrintWriter,字符流类或PrintStream(字节流类). 注意:您可能唯一需要的PrintStream对象是System.out和System.err. ( ...
- java2 实用教程第四章
博主原创 转载请注明地址 博客:http://www.cnblogs.com/13224ACMer/ 1成员变量 声明变量所声明的变量被称为成员变量和域变量,成员变量在类中的书写位置与前后顺序无关, ...
- 九度oj 题目1482:玛雅人的密码 清华大学机试
题目描述: 玛雅人有一种密码,如果字符串中出现连续的2012四个数字就能解开密码.给一个长度为N的字符串,(2=<N<=13)该字符串中只含有0,1,2三种数字,问这个字符串要移位几次才能 ...
- 【转】[重构]Primitive Obsession
http://blog.csdn.net/wxr0323/article/details/7913950 Primitive Obsession(基本类型偏执) 偏执这个词实在是有点难懂.百度百科传送 ...
- pytorch conditional GAN 调试笔记
推荐的几个开源实现 znxlwm 使用InfoGAN的结构,卷积反卷积 eriklindernoren 把mnist转成1维,label用了embedding wiseodd 直接从tensorflo ...
- kb-07线段树-12--二分查找区间边界
/* hdu4614 本题刚开始想能不能记录该区间最前面开始的点,最后面的点,区间空的数量:但是病不行 然后线段树的本质是区间操作,所以!这题主要就是区间的空的全放满,只要定出区间的边界就好办了: 这 ...
- 百度网络监控实战:NetRadar横空出世(下)
原文:https://mp.weixin.qq.com/s/CvCs-6rX8Lb5vSTSjYQaBg 转自订阅号「AIOps智能运维」,已授权运维帮转发 作者简介:运小贝,百度高级研发工程师 负责 ...
- tyvj 2020 rainbow 的信号
期望 被精度坑惨的我 注意:能开 long long 尽量开, 先除后乘, int 转 double 的时候 先转换在做运算 本题与位运算有关,位与位之间互不影响,所以我们可以分开考虑 #includ ...
- 学习javascript设计模式之中介者模式
1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合 ...