对于backgroundPosition,除了IE6,7外其他浏览器都支持。

对于backgroundPositionX,除了Firefox和Opera外其他浏览器都支持。

为了解决兼容问题,我们可以通过split()方法来截取X部分或者Y部分

 

解决办法:
1、先定义一个CSS规则,然后this.className=”
2、document.getElementByIdx_x(“a”).style.cssText=”border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;background-color:white;color:black;text-align=’center’;”
JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的:
1、对于没有中划线的css属性一般直接使用style.属性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。
2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。
如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。
这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。
这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用,这样操作是无效的。
其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器:obj.style.cssFloat。

CSS 和 JavaScript 标签 style 属性对照表:(ps:以下只是其中一种,仍没考虑兼容性

盒子标签和属性对照
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

转自:http://blog.sina.com.cn/s/blog_7de0b6230100z55x.html

 

样式表有三种方式:

内嵌样式(inline Style) :是写在html标签里面的。
内部样式(internal Style Sheet):是写在HTML的头部。
外联样式表(External Style Sheet):是用link链接到外部css文件。

style:标准的样式!可用来查询由html标签的style属性指定的样式。
currentStyle:可用来查询/修改外联或者内部样式表中的样式(仅IE、Opera)。 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。当使用currentStyle做条件判断是,要加上body,document.body.currentStyle,这样才能兼容上IE6,7。
runtimeStyle: 运行时的样式!如果与style的属性重叠,将覆盖style的属性。代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
getComputedStyle:用于Firefox、Chrome、Safari、Opera等浏览器,作用与currentStyle相同。

currentStyle 指浏览器当前显示的,如果用runtimeStyle 写入新样式,那么这个新样式权重最高,currentStyle的值亦改为新样式,所以可以说currentStyle是style 和 runtimeStyle 的结合。即运行时就是runtimeStyle ,否则就style 或currentStyle 。

用法 作用
 style  obj.style.att  只能获取或修改内嵌样式
增改top、left等,IE里直接写数值,Firefox等要加”px”
 runtimeStyle  obj.runtimeStyle.att
obj.runtimeStyle[att]
 能修改(仅添加、修改)三种方式的样式(仅IE)
 currentStyle  obj.currentStyle.att
obj.currentStyle[att]
 能获取(仅获取)三种方式的样式(仅IE)
 getComputedStyle  window.getComputedStyle(obj, pseudoElt)[att]
window.getComputedStyle(obj, pseudoElt).att
window.getComputedStyle(obj, pseudoElt).getPropertyValue(att)
window.getComputedStyle(obj, pseudoElt).getPropertyCSSValue(att)
document.defaultView.getComputedStyle(obj,pseudoElt)[att]
document.defaultView.getComputedStyle(obj,pseudoElt).att
document.defaultView.getComputedStyle(obj,pseudoElt)
.getPropertyValue(att)
document.defaultView.getComputedStyle(obj,pseudoElt)
.getPropertyCSSValue(att)
 能获取(仅获取)三种方式的样式(除IE)
要修改就直接用obj.style.arr

 

当arr为字符串传参时,带中括号 [ ] 的格式可以识别,而.arr格式不能识别。

getComputedStyle的语法可为以上八种,严格来说,带上getPropertyValue或getPropertyCSSValue才算是标准吧。其中pseudoElt是指伪元素,如:after, :before, :marker, :line-marker之类的,如果不用伪类,则填null就可以了。getPropertyValue和getPropertyCSSValue有什么区别呢,getPropertyValue返回的是一个string,而getPropertyCSSValue返回的是一个CSS2Properties对象

© 2012 Hedgehog Suffusion theme by Sayontan Sinha