用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); 转载自:http://www.cnblogs.com/imwtr/p/6051325.html

JS设置CSS样式的几种方式【转】的更多相关文章

  1. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  2. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  3. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  4. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  5. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  6. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  7. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  9. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

随机推荐

  1. RSA 加解密算法

    与DES不同,RSA算法中,每个通信主体都有两个钥匙,一个公钥一个私钥. 就是有2把钥匙1.使用publicKey可以对数据进行加密2.使用Key才能对数据进行解密单方向传输用公钥加密的数据,只有私钥 ...

  2. 序列化悍将Protobuf-Net,入门动手实录

    最近在研究web api 2,看了一篇文章,讲解如何提升性能的, 在序列化速度的跑分中,Protobuf一骑绝尘,序列化速度快,性能强,体积小,所以打算了解下这个利器 1:安装篇 谷歌官方没有提供.n ...

  3. WCF学习笔记之WCF初识

    这篇博客将介绍WCF的最基础内容,让我们对WCF有一个基本的认识.后续的博客中将会介绍WCF其他方面内容.本篇博客将通过一个简单的例子,介绍如何创建WCF服务,并承载这个服务,让客户端来访问它.下面请 ...

  4. Linux下常用命令

    1.判断桌面环境是Gnome还是KDE #update-alternatives --display x-session-manager

  5. 注解:【有连接表的】Hibernate单向1->N关联

    Person与Address关联:单向1->N,[有连接表的] Person.java package org.crazyit.app.domain; import java.util.Hash ...

  6. [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html

    本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...

  7. Codeforces Round #130 (Div. 2) C. Police Station

    题目链接:http://codeforces.com/contest/208/problem/C 思路:题目要求的是经过1~N的最短路上的某个点的路径数 /  最短路的条数的最大值.一开始我是用spf ...

  8. 如何在Ubuntu中让mongo远程可连接

    最近团队的一个成员由于项目原因需要在vps上建立mongo数据库服务器并允许远端访问,这里整理下设置的思路 首先需要安装mongo apt-get updateapt-get install mong ...

  9. 两个本地(localhost)html文件之间的传值

    什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架).可以理解为把iframe解释成“浏览器中的浏览器“ 在IE中: document.frames[i].docum ...

  10. 智能车学习(十)——MMA8451加速度计的使用

    一.驱动说明: 就是使用I2C的通信方式驱动这款加速度计就行了,代码的话选择使用51单片机的代码进行移植. 二.代码分享: 1.头文件: #ifndef MMA8451_H #define MMA84 ...