admin 管理员组

文章数量: 887021


2023年12月18日发(作者:portray的词根词缀)

用JS控制CSS基本样式的方法

CSS code

.class1

{

width:10px;

background-color: red;

}

HTML code

New Document

aaa

(2)

New Document

aaa

还可以用 heets(i).href 可以知道当前页面中引用的每个css的文件!

另:CSS属性与JavaScript编码对照表

(一定要注意, 上次本人_何向阳,在使用js修改css的中margin-left属性时,总报"left"未定义,后来,找了好多资料,才发现在js中,margin-left的写法为:marginLeft,恍然大悟,希望遇到相同问题的朋友,谨慎对待。)

CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:JavaScript中style后面的属性应该是什么?

onmouseout="imageOut(this)" />

JavaScript CSS 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

方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="..."),看一下代码

XML/HTML代码

"/TR/xhtml1/DTD/">

JS获取CSS属性值

background:#333333">JS获取CSS属性值

上面这个例子对id为"css88"的div设置了2种烦事的样式,包括style和外部样式class。

从alert出来的信息可以看到,mentById("css88").style方法获取不到class为ss的属性和值。

那么这么样才能获取到class为ss的属性和值呢?

IE中使用的是tStyle方法,而FF是用的是getComputedStyle 方法。

网上一个比较方法是:

XML/HTML代码

"/TR/xhtml1/DTD/">

S获取CSS属性值

sdf

当然,如果您是引用外部的css文件同样适用。

另:可以将上面的方法简化为

JavaScript代码

function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性

return

tStyle?tStyle[attribute]:putedStyle(obj,false)[attribute];

}


本文标签: 属性 样式 标签