CSS 和 JavaScript 标签 style 属性对照表：
盒子标签和属性对照
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script language="javascript">
function validate(){
if (documentall("name")value == ""){
documentall("name")style["borderColor"]="red";//就是这里
return;
}
}
</script>
<BODY>
<input type="text" name="name" >
</BODY>
</HTML>var styleName = 'left';
documentgetElementById('a')style[styleName]='100px';
js中取对象的属性可以用点或者中括号[]
比如上面的js还可以是
documentgetElementById('a')['style'][styleName]='100px';通过节点的style属性添加
1、定义一个节点
<div id='tsdiv'></div>2、获取div节点
3、添加style
divstyledisplay = 'none';//添加style属性，设置display样式为nonehover是鼠标滑过时改变样式，要实现点击改变的话可以用js或者jQuery来实现；假设点击时的样式表为a；那么给li绑定个点击事件，当li被点击时移除其他li的a样式，给当前被点击的加上a样式。大致思路就是这么的；就像这样 我点击的时候把li中的p标签的字体颜色改成红色的<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" ">我觉得 用 更改类名的方法 修改样式比较好
可以不用js 做一大堆繁琐的工作 css写好样式 直接该类名就好了
添加：节点classListadd("类名")；
删除：节点classListremove("类名")；
原型是用DOM的style属性方法：
Elementstyle[styleDOMName] = "value";Element：指定元素，用documentcreateElement / documentgetElement获取元素obj
或者使用setAttribute方法：
ElementsetAttribute('style','css代码');//会覆盖所有的原来在这个标签上style属性赋的值ElementsetAttribute('style',ElementgetAttribute('style') + "")//不会覆盖因为float是Javascript的保留字，不能直接使用objstylefloat来使用，这样 *** 作是无效的。
其正确的使用方法是为：IE:objstylestyleFloat，其他浏览器Mozilla(gecko)，ff等用styleFloat:objstylecssFloat。
例子：
<div onclick="alert(thisstylefloat); thisstylefloat='left'; alert(thisstylefloat);">测试1</div>
<div onclick="alert(thisstylefloat); if(thisstylecssFloat){thisstylecssFloat='left'; }else{thisstylestyleFloat='left'; }alert(thisstylefloat);">测试2</div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）