用JavaScript修改CSS属性 只有写原生的javascript了。
1.用JS修改标签的 class 属性值:
class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。
更改一个标签的 class 属性的代码是:
document.getElementById( id ).className = 字符串;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。
利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。
举例:
<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">欢迎光临!</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>
2.用JS修改标签的 style 属性值:
style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。DOM 对象也有 style 属性,不过这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一对应的,当改变了 Style 对象的属性时,对应标签的 CSS 属性值也就改变了,所以这属于第二种修改方法。
更改一个标签的 CSS 属性的代码是:
document.getElementById( id ).style.属性名 = 值;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。
说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。
举例:
div id="t2">欢迎光临!</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>
<script type="text/javascript">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>
方法:
document.getElementById("xx").style.xxx中的所有属性是什么
| 盒子标签和属性对照 |
| CSS语法(不区分大小写) |
JavaScript语法(区分大小写) |
| border |
border |
| 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 |
borderTop |
| border-top-color |
borderTopColor |
| border-top-style |
borderTopStyle |
| border-top-width |
borderTopWidth |
| border-width |
borderWidth |
| clear |
clear |
| float |
floatStyle |
| margin |
margin |
| margin-bottom |
marginBottom |
| margin-left |
marginLeft |
| margin-right |
marginRight |
| margin-top |
marginTop |
| padding |
padding |
| 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 |
| background-position |
backgroundPosition |
| background-repeat |
backgroundRepeat |
| color |
color |
| |
| 样式标签和属性对照 |
| CSS语法(不区分大小写) |
JavaScript 语法(区分大小写) |
| display |
display |
| list-style-type |
listStyleType |
| list-style-image |
listStyleImage |
| list-style-position |
listStylePosition |
| list-style |
listStyle |
| white-space |
whiteSpace |
| |
| 文字样式标签和属性对照 |
| CSS 语法(不区分大小写) |
JavaScript 语法(区分大小写) |
| font |
font |
| font-family |
fontFamily |
| font-size |
fontSize |
| font-style |
fontStyle |
| font-variant |
fontVariant |
| font-weight |
fontWeight |
| |
| 文本标签和属性对照 |
| CSS 语法(不区分大小写) |
JavaScript 语法(区分大小写) |
| letter-spacing |
letterSpacing |
| line-break |
lineBreak |
| line-height |
lineHeight |
| text-align |
textAlign |
| text-decoration |
textDecoration |
| text-indent |
textIndent |
| text-justify |
textJustify |
| text-transform |
textTransform |
| vertical-align |
verticalAlign |