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]; }
javaScript之动态样式的更多相关文章
- 第一百一十八节,JavaScript,动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- Javascript高级编程学习笔记(44)—— 动态样式
动态样式 动态样式和昨天的动态脚本一样,都是一种动态引入外部样式(脚本的方式) 由于样式是由 link 元素引入的,所以动态样式自然也就是动态生成link元素插入文档的方式 不过和动态脚本不同的是,动 ...
- 深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...
- DOM动态脚本和动态样式
动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...
- Less (一种动态样式语言)
Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...
- 动态样式语言Sass&Less介绍与区别
一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...
- DOM操作技术之动态脚本与动态样式(兼容版)
动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...
- less 一种 动态 样式 语言
LESS « 一种动态样式语言 http://www.bootcss.com/p/lesscss/ 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数 ...
- 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战
一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...
随机推荐
- pandas读取Excel
time31 = pd.read_excel('F:/save_file/3问出车表.xlsx', sheetname='Sheet1') # 读取‘3问出车表.xlsx’中的Sheet1表单, ti ...
- WinDBG__独立安装文件
debugging tools for windows 1. 来自于网页:http://rxwen.blogspot.hk/2010/04/standalone-windbg-v6120002633. ...
- iOS开发中的系统版本比较
由于系统平台和SDK更新迭代,一部分过时的成员.方法会被彻底从SDK中移除,为了兼容旧的设备,这时就需要区分系统平台版本调用正确的API. 另一种情况是iOS设备的屏幕和设备参数不同,虽然UI上的Au ...
- 时间服务器: NTP 服务器及客户端搭建
时间服务器: NTP 服务器及客户端搭建 一. NTP 服务器的安装与设定 1. NTP 服务器的安装与设定前言 2. 所需软件与软件结构 3. 主要配置文件 ntp.conf 的处理 4. NTP ...
- hzau 1202 GCD(矩阵快速幂)
1202: GCD Time Limit: 1 Sec Memory Limit: 1280 MBSubmit: 201 Solved: 31[Submit][Status][Web Board] ...
- 【微信小程序+ES6新特性应用】字符串模板:美元符号$+大括号{}变量的写法
1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...
- C#中的线程(三)多线程
C#中的线程(三)多线程 Keywords:C# 线程Source:http://www.albahari.com/threading/Author: Joe AlbahariTranslator ...
- [Unity3D]EZGUI 操作简单介绍
官方的GUI根本无法跟EZGUI比,无论是资源还是易用性还是速度.EZGUI基于Mesh不占DrawCall.EZGUI是自动合并Mesh成为一个物体,并且贴图自动制作Atlas.所以效率高,CPU消 ...
- jacksi(比较实用的工具批处理)
批处理类别: 国产软件 批处理语言: 简体中文 授权方式: 免费软件 运行环境: Windows平台 警告:运行BAT源码是一种危险的动作,如果你不熟悉,请不要尝试! 这里分享的是用bat写的比较实用 ...
- 如何打开 Windows 的热键提示
如何打开 Windows 的热键提示 很早之前我记的 Windows 是有热键提示的,不知道什么时候开始默认不显示了,难道 微软是为是美观? 找了一下原来是有地方可以设置的.