用JavaScript修改CSS属性的代码

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>欢迎光临!</div>
<p><button>更改样式</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>欢迎光临!</div>
<p><button>大小</button>
<button>颜色</button>
<button>背景</button>
<button>边框</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 

 

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgjsy.html