JS设置CSS样式的集中方式
1. 直接设置style的属性 某些情况用这个设置 !important值无效
如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px';
element.style.height = '100px';
2. 直接设置属性(只能用于某些属性,相关样式会自动识别)
element.setAttribute('height', 100);
element.setAttribute('height', '100px');
3. 设置style的属性
element.setAttribute('style', 'height: 100px !important');
4. 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数
element.style.setProperty('height', '300px', 'important');
5. 改变class 比如JQ的更改class相关方法
因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式
element.className = 'blue';
element.className += 'blue fb';
6. 设置cssText
element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';
7. 创建引入新的css样式文件
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js'); if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
} styleElement.appendChild(document.createTextNode(newStyle));
} addNewStyle('.box {height: 100px !important;}');
8. 使用addRule、insertRule
// 在原有样式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0); // 或者插入新样式时操作
var styleEl = document.createElement('style'),
styleSheet = styleEl.sheet; styleSheet.addRule('.box', 'height: 100px');
styleSheet.insertRule('.box {height: 100px}', 0); document.head.appendChild(styleEl);
JS设置CSS样式的集中方式的更多相关文章
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- JS设置CSS样式的几种方式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- JS设置CSS样式的几种方式【转】
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- 3.通过js代码设置css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 5、通过js代码设置css样式
1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- js改变css样式
CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...
- cssText设置css样式
js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js 如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...
随机推荐
- Java复习 之流
在Java程序中 对于数据的输入/输出操作以“流”方式进行:提供了各种各样的流类,用以获取各种不同的种类的数据,程序中通过标准的方法输入或输出数据 Inputstream 例子1: 但是中文会乱码 应 ...
- Java学习07 (第一遍) - Spring MVC
跳过Struts2,直接学习Spring MVC MVC,自己画的 属性(Property/Attribute),事件(Event),方法(method/procedure),函数(Function) ...
- func 的参数修饰
1.0 在声明一个 Swift的方法的时候,我们一般不去指定参数前面的修饰符,而是直接声明参数: func incrementor(variable : Int) ->Int { } 这个方法接 ...
- Applese的回文串-dfs
链接:https://ac.nowcoder.com/acm/contest/330/I来源:牛客网 题目描述 自从 Applese 学会了字符串之后,精通各种字符串算法,比如……判断一个字符串是不是 ...
- 初始C语言中的数组(男神翁凯老师MOOC)
定义数组 ●<类型>变量名称[元素数量]; ● int grades[100]; ●double weight[20]; ●元素数量必须是整数 ●C99之前:元素数量必须是编译时刻确定的字 ...
- RecycleView 使用自定义CardLayouManager内容无法滚动问题
1.开始一直反应不过来一个问题:RecycleView不是自带滚动效果吗?为啥子条目还不能全部滚动,显示出来呢? 意识到:只有当RecycleView 适配器中条目数量特别多,才可以滚动. 然而自己的 ...
- cdnbest的站点日志保存时间怎么设置
站点的保存时间是以节点全局里的保存时间为准 站点的日志保存大小还不能设置
- Windows 2012设置允许单个用户连接多个会话的方法
WINDOWS 2012 服务器默认只允许单个用户连接一个远程桌面会话,如果已有连接登陆,另外的连接再登陆会踢掉之前的连接.如果需要两个远程桌面同时连接 找到:HKEY_LOCAL_MACHINE\S ...
- BOM 对象--location、navigator、screen、history
1.location 对象 location提供了与当前窗口中加载的文档有关的信息,还有一些导航功能.需要注意的是,window.location 和 document.location 引用的是同一 ...
- Mysql 数据类型(基础5)
Mysql 常用的4种数据类型: 整型 int. 浮点型 double. 日期类型 datetime .字符型( varchar char text ) #创建一张表 mysql> create ...