看到一段有意思的代码,所以查询了一下。
<html>
<head>
<script type="text/javascript">
function setFloat()
{
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="/i/ct_beatles.jpg" />
<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<input type="button" onclick="setFloat()" value="Set image to float to the left" />
</body>
</html>
效果:
知识点:
Style cssFloat 属性
定义和用法
cssFloat 属性设置或返回元素的水平对齐方式。
语法
设置 cssFloat 属性:
Object.style.cssFloat="left|right|none|inherit"
返回 cssFloat 属性:
Object.style.cssFloat
值 | 描述 |
---|---|
left | 对象/元素浮到父元素的左边 |
right | 对象/元素浮到父元素的右边 |
none | 默认。对象/元素不浮动。 |
inherit | cssFloat 属性的值从父元素继承。 |
所有主要浏览器都支持 cssFloat 属性。
注意:IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。
提示和注释
注释:如果在一行中对于浮动元素而言空间太少,则这个元素会跳到下一行,这个过程会持续到有足够空间的一行为止。