动态添加样式可以实现更好的视觉效果和交互效果,下面就介绍一下如何动态和删除样式:

方法一、使用obj.className来修改样式表的类名

obj.className = “style1”;

方法二、使用obj.style.cssTest来修改嵌入式的css

obj.style.cssText = "background-color:black; display:block;color:White;

方法三、使用obj.style.stylePro来修改嵌入式的css

obj.style.backgroundColor= "black";

方法四、使用obj.setAttribute( ,);

obj.setAttribute("class", "style2");

方法五、使用更改外联的css文件,从而改变元素的css

var obj = document.getElementById("css");

obj.setAttribute("href","css2.css");

方法六、创建和添加<link>和<style>标签。

创建<link>

var link = document.creatElement(“link”);

     link.rel = “stylesheet”;

     link.type = “text/css”;

     link.href = url;

     var head = document.getElementByTagName(“head”)[0];

     head.appendChild(link);

创建<style>

var style = document.creatElement(“style”);
try{
style.appendChild(document.creatTextNode(“body{background-color:red}”));
}catch(ex){ Style.styleSheet.cssText = “body{background-color:red}”;
} var head = document.getElementByTagName(“head”)[0]; head.appendChild(link);

删除样式可以将相应的属性值设为空字符串“”。

扩展:上次文章中我们提到如何遍历HTML的DOM元素,那么如何获取遍历样式表呢?

要获取元素的完整的样式信息,必须使用 window 对象的 getComputedStyle 方法,此方法有2个参数,第一个参数为要获取计算样式的元素,第二个参数可以是null、空字符串、伪类(如:before,:after),这两个参数 都是必需的。在 IE8 以下浏览器中没有实现 getComputedStyle 方法,但可以使用 IE 中每个元素有自己的 currentStyle 属性来获取样式。获取元素样式的兼容代码如下:

var testDiv = document.getElementById("testDiv");

var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;

// window.getComputedStyle() 非IE浏览器

// testDiv.currentStyle  IE浏览器

var width = styleInfo.width;  //100px;

var height = styleInfo.height;  //100px;

var color = styleInfo.color;  // rgb(255, 0, 0)

获取<link>和<style>标签写入的样式,通过 ocument.sstyleSheets[] 获取某个样式表。用DOM的样式表和CSS模块,可以检测到文档中所有的样式和链接到文档的所有样式。

Var ss = document.styleSheets[0];

这个数组是styleSheet对象,表示通用样式。StyleSheet对象具有cssRule[]数组,该数组用于存放样式表规则。

var obj = document.styleSheets[0];

if( obj.cssRules ) {

     // 非IE [object CSSRuleList]

     rule = obj.cssRules[0]; 

} else {

     // IE [object CSSRuleList]

     rule = obj.rules[0];

}

javaScript之动态样式的更多相关文章

  1. 第一百一十八节,JavaScript,动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  2. Javascript高级编程学习笔记(44)—— 动态样式

    动态样式 动态样式和昨天的动态脚本一样,都是一种动态引入外部样式(脚本的方式) 由于样式是由 link 元素引入的,所以动态样式自然也就是动态生成link元素插入文档的方式 不过和动态脚本不同的是,动 ...

  3. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

  4. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  5. Less (一种动态样式语言)

    Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...

  6. 动态样式语言Sass&Less介绍与区别

    一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...

  7. DOM操作技术之动态脚本与动态样式(兼容版)

    动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...

  8. less 一种 动态 样式 语言

    LESS « 一种动态样式语言 http://www.bootcss.com/p/lesscss/ 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数 ...

  9. 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战

    一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...

随机推荐

  1. Codeforces 938E Max History:排列 + 逆元【考虑单个元素的贡献】

    题目链接:http://codeforces.com/problemset/problem/938/E 题意: 定义f(a): 初始时f(a) = 0, M = 1. 枚举i = 2 to n,如果a ...

  2. OSGi类加载问题

    项目中遇到的JVM难点 ——启动OSGi容器时,出现永久代内存不够.内存泄露 ——OSGi找不到类路径问题. ——线程死锁问题.   问题一:OSGi类内存问题         其次,从内存用量来看, ...

  3. web 程序中的编码

    比如字符串  <script type="text/javascript">alert('跨站攻击鸟')</script>   1.html encode ...

  4. 解决:phantomjs helloworld.js报错: Can't open 'helloworld.js'

    PhantomJS是一个无界面的,可脚本编程的WebKit浏览器引.它原生支持多种web 标准:DOM 操作,CSS选择器,JSON,Canvas 以及SVG. 当我安装好PhantomJS后,写下第 ...

  5. 《Advanced Bash-scripting Guide》学习(十三):引用变量的两个例子

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 例1. 使用""可以防止单词分割,将变量看成一个整体,没有& ...

  6. 51nod 1272 思维/线段树

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1272 1272 最大距离 题目来源: Codility 基准时间限制:1 ...

  7. 用node.js可以开启静态服务 不需要借助apache 或者xampl

    安装好了Node以及express,然后用express命令生成express架构, 目录结构下面有一个public页面, 把你的静态页面放到这个文件夹下, 通过npm start,开启服务就可以在浏 ...

  8. Linux-监控与安全运维之cacti

    一:cacti简介 Cacti 在英文中的意思是仙人掌的意思,Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.它通过snmpget来获取数据,使用 RR ...

  9. python 类的定义和继承

    python 2 中类 一.类定义: ? 1 2 class <类名>:   <语句> 类实例化后,可以使用其属性,实际上,创建一个类之后,可以通过类名访问其属性如果直接使用类 ...

  10. 利用python进行数据分析—数据清洗记录3,map,apply,

      社会心态调查报告 导语: 时代决定心态,心态映照时代.社会心态产生于社会个体心理,又以整体的形态存在,进而影响着每个社会成员的社会价值取向和行为方式,影响着国家经济政治和社会发展大局.良好的社会心 ...