我正在尝试创建一个简单的列布局,其中mainContent和rightContent在同一个“行”中。 我想在JavaScript中设置样式,而不是使用CSS。
这就是我的http://jsfiddle.net/tKt5J/2/ 。
var mainContent = document.getElementById('mainContent'); var rightContent = document.getElementById('rightContent'); mainContent.style.width = "70%"; mainContent.style.styleFloat = "left"; rightContent.style.width = "20%"; rightContent.style.styleFloat = "left";出于某种原因,这适用于IE 11,但不适用于其他浏览器(例如Chrome 33)。 如何让它跨浏览器工作?
I am trying to create a simple column layout where mainContent and rightContent is in the same "row". Instead of using CSS I want to set styles in JavaScript.
This is what I have http://jsfiddle.net/tKt5J/2/ .
var mainContent = document.getElementById('mainContent'); var rightContent = document.getElementById('rightContent'); mainContent.style.width = "70%"; mainContent.style.styleFloat = "left"; rightContent.style.width = "20%"; rightContent.style.styleFloat = "left";For some reason this works in IE 11 but not in other browsers (such as Chrome 33). How can I make it work across browsers?
最满意答案
演示
使用cssFloat而不是styleFloat :
mainContent.style.cssFloat = "left"; rightContent.style.cssFloat = "left";根据MDN float文章中的说明 ,
如果您将JavaScript中的此属性称为element.style对象的成员,则必须将其拼写为cssFloat 。 另请注意,Internet Explorer版本8及更早版本拼写了此styleFloat 。 这是一个例外,即DOM成员的名称是以破折号分隔的CSS名称的驼峰式名称(并且由于“float”是JavaScript中的保留字这一事实,因为需要将“class”转义为“className”,将escape的“for”转换为“htmlFor”)。
Demo
Use cssFloat instead of styleFloat:
mainContent.style.cssFloat = "left"; rightContent.style.cssFloat = "left";According to the note in MDN float article,
If you're referring to this property from JavaScript as a member of the element.style object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape 's "for" as "htmlFor").
更多推荐
发布评论