javaScript之动态样式

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

方法一、使用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];

}
时间: 2024-10-10 05:23:37

javaScript之动态样式的相关文章

javascript如何动态设置div的样式

javascript如何动态设置div的样式:有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="aut

JavaScript高级程序设计之动态脚本及动态样式

1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createElement("script"); script.src = url; document.getElementsByTagName("head")[0].appendChild(script); if (script.addEventListener) { // for w

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

JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 比如:我们想在需要检测浏览器的时候,再引入检测文件. 1动态加载js文件 window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数 //判断要加载的文件是否加载成功 alert(typeof BrowserDetect); }

“高三”笔记之动态JS、动态样式

拜读<JavaScript高级程序设计> --- 站在巨人的肩上 动态JS.动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本:包括加载外部文件和添加内部代码块两种:动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行:下面将主要以JS为例,小小的探索下动态脚本的加载.执行以及jQuery的做法.Angularjs的相关做法: 1.动态加载外部文件 因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理:这里的重点是怎么知道脚本已加载完成呢?呵呵

Less (一种动态样式语言)

Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript.受益于JavaScript,LESS 可以在客户端上运行(IE6+.Webkit.Firefox),也可以在服务端运行(Node.js.Rhino). 在语法方面,LESS与CSS较为接近,一个合法的CSS代码段本身也是一段合

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

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .

javascript 修改css样式

abc.css CSS code .class1     {    width:10px;    background-color: red;    } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><link rel="stylesheet" type="text/css" href

动态样式语言Sass&amp;Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读.Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css. Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (

Web前端一种动态样式语言-- Less

变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用.所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了. // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 混合 混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现