列div布局不适用于所有浏览器(Column div layout not working in all browsers)

列div布局不适用于所有浏览器(Column div layout not working in all browsers)

我正在尝试创建一个简单的列布局，其中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").