博客分类：
document.getElementById("xx").style.xxx中的所有属性是什么
盒子标签和属性对照
CSS语法（不区分大小写）
JavaScript语法（区分大小写）
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border-left-color
borderLeftColor
border-left-style
borderLeftStyle
border-left-width
borderLeftWidth
border-right
borderRight
border-right-color
borderRightColor
border-right-style
borderRightStyle
border-right-width
borderRightWidth
border-style
borderStyle
border-top
border-top-color
borderTopColor
border-top-style
borderTopStyle
border-top-width
borderTopWidth
border-width
borderWidth
floatStyle
margin-bottom
marginBottom
margin-left
marginLeft
margin-right
marginRight
margin-top
padding-bottom
paddingBottom
padding-left
paddingLeft
padding-right
paddingRight
padding-top
paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写）
JavaScript 语法（区分大小写）
background
background
background-attachment
backgroundAttachment
background-color
backgroundColor
background-image
backgroundImage
="url(XX)"
background-position
backgroundPosition
background-repeat
backgroundRepeat
样式标签和属性对照
CSS语法（不区分大小写）
JavaScript 语法（区分大小写）
list-style-type
listStyleType
list-style-image
listStyleImage
list-style-position
listStylePosition
list-style
white-space
whiteSpace
文字样式标签和属性对照
CSS 语法（不区分大小写）
JavaScript 语法（区分大小写）
font-family
fontFamily
font-style
font-variant
fontVariant
font-weight
fontWeight
文本标签和属性对照
CSS 语法（不区分大小写）
JavaScript 语法（区分大小写）
letter-spacing
letterSpacing
line-break
line-height
lineHeight
text-align
text-decoration
textDecoration
text-indent
textIndent
text-justify
textJustify
text-transform
textTransform
vertical-align
verticalAlign
浏览: 369781 次
来自: 北京
Java并发编程与高并发解决方案网盘地址：https://pa ...
Java并发编程与高并发解决方案网盘地址：https://pa ...
Java并发编程和高并发解决方案视频课程网盘地址：https: ...
如果不是转载 ， 要点总结的非常好
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'JavaScript HTML DOM - 改变 CSS
JavaScript HTML DOM - 改变 CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
下面的例子会改变 &p& 元素的样式：
&p id=&p2&&Hello World!&/p&
document.getElementById(&p2&).style.color=&blue&;
本例改变了 id=&id1& 的 HTML 元素的样式，当用户点击按钮时：
&h1 id=&id1&&My Heading 1&/h1&
&button type=&button& onclick=&document.getElementById('id1').style.color='red'&&
如何使元素不可见。您希望元素显示或消失吗？
HTML DOM Style 对象参考手册
如需完整的 HTML DOM Style 对象属性，请参阅我们的 。求js中如何修改外部css的属性
[问题点数：30分，结帖人hanyuwei0]
本版专家分：0
结帖率 95%
CSDN今日推荐
本版专家分：29110
2012年12月 Web 开发大版内专家分月排行榜第二2012年11月 Web 开发大版内专家分月排行榜第二
本版专家分：43
本版专家分：0
本版专家分：15174
本版专家分：0
本版专家分：30
本版专家分：0
本版专家分：29110
2012年12月 Web 开发大版内专家分月排行榜第二2012年11月 Web 开发大版内专家分月排行榜第二
匿名用户不能发表回复！
其他相关推荐如果想修改某个元素的CSS样式，建议看一下我写的另一篇文章：
注意：我说的是修改，而不是访问。如果是修改的话可以看看上面《补充说明》这篇文章，但如果是访问的话，就看本文中的这两种方法，同样，如果是访问兼顾修改的话，也只看本文中的两种方法（这是我了解到的两种方法，如果有其他的方法，请赐教，谢谢）
Javascript 访问修改页面元素的CSS样式，一般有两种方法
一种方法是访问修改元素中style属性的CSS样式，一般这样的style属性是直接写在元素上的，而不是在外部的CSS文件中；另一种方法是访问外部的CSS文件，然后修改CSS样式，下面对这两种方法进行介绍。
1. 访问并修改元素中style属性的CSS样式
看下面的例子：
源码如下：
&script language="javascript"&
//js如何访问元素的style属性，进行样式修改
function test4(eventObj){
//怎么知道是 黑色 按钮按下还是 红色按钮按下
if(eventObj.value=="黑色"){
//根据ID号获取对应的元素，可以访问元素中的style对象，
//也可以通过访问元素中的style对象，再访问对象中的其他属性
//也可以对这些属性进行修改，直接为其赋值即可，如下：
var div1=document.getElementById('div1');
window.alert(div1.style.width);//访问对象的width属性
div1.style.width="450px";
//原来的width值为400px，改为450px
//将背景颜色改为black
div1.style.backgroundColor="black"; //这里修改颜色，不能写background-color，而是backgroundColor
} else if(eventObj.value=="红色"){
var div1=document.getElementById("div1");
//window.alert(div1.style.width);
div1.style.backgroundColor="red";
&!-- 如何通过修改style来改变style --&
&div id="div1" style="width:400height:300background-color:red" &div1&/div&
&input type="button" value="黑色" onclick="test4(this)"/&&!-- 这里的this就是当前button对象 --&
&input type="button" value="红色" onclick="test4(this)"/&
2. 访问并修改外部定义的CSS样式（类定义的CSS样式）
js访问外部定义的CSS样式（类定义的CSS样式），不能使用上面的通过修改style属性来改变style属性的方法去访问，因为CSS数据不是存储在style属性中，它是存储在类中的。
那么访问外部定义的CSS样式文件的方法是：先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，在这个集合中包含了定义在样式表中的所用的CSS规则。
（注意：Mozilla和Safasi中是cssRules，而IE中式rules）。
看下面的例子：
两个css文件，如下
html文件，如下：
源代码如下：
height:200
background-color:
height:100
background-color:
mycss2.css
height:300
background-color:
height:400
background-color:
html代码：
&link rel="stylesheet" type="text/css" href="mycss.css" /&
&link rel="stylesheet" type="text/css" href="mycss2.css" /&
&script language="javascript"&
function test4(eventObj){
//获取mycss.css 中所有的class选择器
//styleSheets[0];这里的0表示当前文件中引用的第一个css文件
//如果是获取mycss2.css中所有的class选择器，则应写成styleSheets[1]
var ocssRules = document.styleSheets[0].rules||document.styleSheets[0].cssR //获取mycss的所有样式
var ocssRules1 = document.styleSheets[1].rules||document.styleSheets[1].cssR //获取mycss2的所有样式
//从ocssRules中取出你希望的class
var style1=ocssRules[0];
var style2=ocssRules[1]; //mycss.css文件中的 两个样式
var style3=ocssRules1[0];
var style4=ocssRules1[1];
//mycss2.css文件中的 两个样式
window.alert(style1.style.backgroundColor);
window.alert(style2.style.backgroundColor);
window.alert(style3.style.backgroundColor);
window.alert(style4.style.backgroundColor); //访问获取的四个样式的背景色
//修改 style1 的背景色
if(eventObj.value=="黑色"){
style1.style.backgroundColor="black";
} else if(eventObj.value=="红色"){
style1.style.backgroundColor="red";
&!-- 定义一个class选择器 --&
&div id="div1" class="style1"&div1&/div&
&input type="button" value="黑色" onclick="test4(this)"/&&!-- 这里的this就是当前button对象 --&
&input type="button" value="红色" onclick="test4(this)"/&
以上就是Javascript 访问修改页面元素的CSS样式的两种方法
js改变style样式和css样式
在很多情况下，都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。
1、使用obj.className来修改样式表的类名...
原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式：
1通过在javascript代码中的node.style.cssText=&css表达式1；css表达式2；css表达式3
&的方式直接更改...
JS修改css方法
var obj = document.getElementById(“objA”);
obj.style.backgroundColor= “black”;
var obj...
用JS改变html样式
用JS改变HTML样式
在html中定义样式的方法有3种：
通过link标签链接外部样式
使用style标签定义嵌入式样式
使用标签style属性定义样式
用JS改变的HTML样式无非就是上...
关于JS动态修改CSS样式问题（class和style）
修改标签的class属性值
直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进行切换，是最简单可行的一种方式。也是目前使用最多的方法。此方法会覆盖对象原有的class属性
...
js改变css样式的三种方法
共用代码：
这是一个盒子
var div = document.getElementById(&div&);
第一种:用cssText
div.style.cssText=...
实现能动态的改变css样式-场景
比如某个表达元素在不同的状态需要展现不同的样子
实现能动态的改变css属性值
angular方法
第一种：通过数据的双向绑定（不推荐）
JavaScript如何调用CSS属性
JavaScript如何调用CSS属性？1、margin、width、left
obj.style.margin
obj.style.width
obj.style.left2...
使用javascript全局改变CSS样式（网页样式）
之前写过两篇文章通过javascript改变CSS样式，如
Javascript 如何访问修改CSS样式(网页样式)。Javascript 访问和修改CSS样式(网页样式) 补充说明
这两篇文章都...
[Javascript]：DOM操作之动态修改CSS样式和高级选择器
首选，回顾一下CSS定义样式的三种方式：链接外部样式、嵌入样式(放在head元素中)和内联样式（行内样式）。想要让样式生效，有如下方式：
通过CSS选择器来进行大规模选取，但通常会用到ID属性和c...
没有更多推荐了，