关于使用JS动态修改CSS样式问题
来源:互联网 发布:公共领域道德缺失知乎 编辑:程序博客网 时间:2024/06/11 15:22
- <script type="text/javascript">
- var obj = document.getElementById("div");
- obj.className = "otherclass";
- </script>
- <script type="text/javascript">
- var obj = document.getElementById("div");
- obj.setAttribute("className","otherclass");//IE下使用className
- obj.setAttribute("class","otherclass");//FF下的方式 所以要注意
- </script>
- <script type="text/javascript">
- var obj = document.getElementById("div");
- objh=document.defaultView.getComputedStyle(obj,null).height;
- //或者
- objh=window.getComputedStyle(obj,null)[height];
- //IE下 需要
- objh=obj.currentStyle[height];
- </script>
- function getStyle(element,property) {
- var value = element.style[camelize(property)];
- if(!value) {
- if(document.defaultView && document.defaultView.getComputedStyle) {
- value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
- } else if(element.currentStyle) {
- value = element.currentStyle[camelize(property)];
- }
- }
-
- return value;
- }
- document.styleSheets[0];//获取第一个样式表
- document.styleSheets[0].cssRules[0];//W3C 获取第一个样式表的第一个样式信息
- document.styleSheets[0].rules[0];//IE 获取第一个样式表的第一个样式信息
W3C DOM2样式规则
==========================================================
CSSStyleSheet对象
CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表。
CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条规则。
通过document.stylesheets属性可以取得文档中CSSStyleSheet对象的列表,其中每个对象有下列属性
type 始终为text/css
disabled 相应样式表是应于还是禁用于当前文档
href 样式表相对于当前文档的URL
title 分组样式标签
media 样式应用的目标设备类型(screen、print)
ownerRule 只读CSSRule对象,若样式用@import导入,表示其父规则
cssRules 只读cssRuleList列表对象,包含样式表中所有CSSRule对象
==========================================================
insertRule(rule,index) 添加新的样式声明
deleteRule(index) 从样式表中移除规则
CSSStyleRule对象
每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象。这些对象分别对应着类似下面这样一条规则:
boyd{
font:lucida,verdana,sans-serif;
background:#c7600f;
color:#1a3800;
}
CSSStyleRule对象具有下列属性:
type 继承自CSSRule对象的一个属性,以0~6中的一个数字表示规则类型
cssText 以字符串形式表示的当前状态下的全部规则
parentStyleSheet 引用父CSSStyleRule对象
parentRule 如果规则位于另一规则中,该属性引用另一个CSSRule对象
selectorText 包含规则的选择符
style 与HTMLElement.style相似,是CSSStyleDeclaration对象的一个实例
CSSStyleDeclaration对象
表示一个元素的style属性,与CSSStyleRule对象类似,CSSStyleDeclaration具有下面属性:
cssText 以字符串形式表示的全部规则
parentRule 将引用CSSStyleRule对象
==========================================================
getPropertyValue(propertyName) CSS样式属性值
removeProperty(propertyName) 从声明中移除属性
setProperty(propertyName,value,priority) 设置CSS属性值
- 关于使用JS动态修改CSS样式问题
- 关于JS动态修改CSS样式问题(class和style)
- 关于用js动态修改div样式
- js修改css样式
- js修改css样式
- js修改css样式
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- 关于Css的动态修改问题
- ASP.NET 中直接使用C# 动态修改CSS样式
- ASP.NET 中直接使用C# 动态修改CSS样式
- js动态改变css样式
- 关于JavaScript修改CSS样式
- 关于js动态添加的时候样式失效的问题
- javascript 动态修改css样式方法
- js 动态修改css文件
- 关于页面CSS样式问题
- CSS:关于“-webkit-appearance: none”样式使用问题
- js修改css样式表解析(转)
- Java进阶08 GUI
- 别以为真懂Openstack: 虚拟机创建的50个步骤和100个知识点(2)
- AndroidStudio项目第三方jar混淆规则
- java装饰模式
- js变量和js数据类型关系
- 关于使用JS动态修改CSS样式问题
- clang static analyzer源码分析(一)
- 别以为真懂Openstack: 虚拟机创建的50个步骤和100个知识点(3)
- Learning Python(11)--paramiko模块
- Atitit.biz业务系统 面向框架 面向模式---------数据映射imp
- Java进阶09 事件响应
- C语言中switch语句的思考
- IOS 开发之 多线程
- Leetcode:217. Contains Duplicate(JAVA)