js改变css样式
2024-08-30 00:29:48
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";
最新文章
- HTML空格标签
- 字符串hash算法
- MSMQ(Microsoft Message Queue)
- CSS - Transform(Translate) abnormal shadow in firefox
- Windows下Cygwin中使用NCView
- GC: CMS垃圾回收器一(英文版)
- windows下搭建属于自己的web服务器
- unity3d 制造自己的水体water effect(一)
- C# ASP.NET CSV文件导入数据库
- C# 将前端传来的图片文件分别以大图和缩略图保存
- MyBatis源码解析(十)——Type类型模块之类型处理器TypeHandler
- Jump Flood Algorithms for Centroidal Voronoi Tessellation
- 【洛谷P4145】花神游历各国
- 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
- 【Java】PS-查看Java进程-线程数
- ubuntu 安装ftp nginx tomcat,mysql
- [SharePoint 2010]Sandboxed Solution (沙箱解決方案)
- 双击jar包运行方法
- Java中枚举的相关应用
- vs报错&ldquo;以下文件中的行尾不一致,是否将行尾标准化&rdquo;