获取 修改 CSS 样式

内联(style里的)样式

element.style.color

element.style.getPropertyValue("color")

非内联样式

window.getComputedStyle(elem1,null).getPropertyValue("backgroundColor");     (getComputedStyle(elem1,null)   第二个参数null用于获取伪类样式(":after"))

document.defaultView.getComputedStyle(elem1,null).getPropertyValue("backgroundColor");

(使用defaultView可能一是人们不太乐意在window上专门写个东西,二是让API在Java中也可用)

ie(6-8)下需要使用元素方法实现:

object.currentStyle.backgroundColor    (   IE不支持DOM的style对象下的方法 ,例如element.style.removeProperty("color")   )

computed style都是只读的

下面这种可以获取<style>标签里面的样式

document.styleSheets[0].cssRules  ||  document.styleSheets[0].rules

添加多条样式到style属性:

element.style.cssText  = element.style.cssText + ";" + addcss(需要添加的样式);

(语法  element.style.cssText="width:200px;height:70px;display:bolck";  )

淘宝:

var styleEl = document.createElement("style");

document.getElementsByTagName("head")[0].appendChild(styleEl);

if (styleEl.styleSheet) {

if (!styleEl.styleSheet.disabled) {                                                        //判断样式是否添加到document

styleEl.styleSheet.cssText = cssText;

}

} else {

try {

styleEl.innerHTML = cssText

} catch(e) {

styleEl.innerText = cssText;

}

}

时间: 2024-08-05 08:44:37

获取 修改 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

(转载)记录函数 getStyle() 获取元素 CSS 样式

设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = '#000'; 然而,很多时候我们在修改元素的样式之前要先保留元素原来的样式属性值,或许可以这么做: var bc = element.style.backgroundColor; 这么做有可能获取到element元素的background-color属性值,但是,在多数情况下获取到的确实 'unde

用JS查看修改CSS样式(cssText,attribute(&#39;style&#39;),currentStyle,getComputedStyle)

CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 <div id="div1" style="width: 100px; height: 100px; background: black"> 2 </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style&

jquery修改css样式,样式带!important

由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方法:$("#idName").css("backgroundColor","red");但是这个方法无法改变padding-left:12px;这一块的背景色,因为定位不到它的id. 后来在请教了公司的搞html的同事(民庆)后,他说要在样式后面加个

关于修改css样式的几种js用法

看了js也有一段时间了,对于修改css样式有很多种方式可以实现,今天做一个小小的总结吧. 首先写个例子 body部分 <div class="box"></div><inpiut id-"btn" type="button" value="按钮"> style部分 .box{ width: 100px; height: 100px; background: red; border: 1px

js获取、修改CSS样式

CSS样式分为三种,行内样式.内部样式.外部样式. 一.element.style.stylename 创建.获取.修改       行内样式   console.log(document.getElementById("testcss0").style.backgroundColor);//"" document.getElementById("testcss0").style.backgroundColor = "black&quo

廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.innerHTML = 'ABC'; // <p id="

07.30《jQuery》——1.4修改CSS样式

1.单一修改样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #aaa{ height: 100px; width: 100px; background-color: red; } </style> <script src=&

ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据,然后赋值给前端页面 HTML <meta> 标签添加 HtmlMeta mtdes = new HtmlMeta();//新建实例 mtdes.Name = "Description";//标签 mtdes.Content = this.Descriptionp;//内容 H