JavaScript動態設定float浮動

admin發表於2018-06-17
JavaScript

利用CSS的float屬性可以輕鬆設定元素浮動效果，具體參閱CSS float浮動一章節。

下面介紹一下利用JavaScript動態設定元素的float浮動效果。

加入要設定元素的右浮動，很多朋友可能會使用如下類似程式碼：

[JavaScript] 純文字檢視 複製程式碼
odiv.style.float="right";

其實上面程式碼是錯誤的，正確程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var oleft=document.getElementById("left");
  var oright=document.getElementById("right");
  if(document.all){
    oleft.style.styleFloat="left";
    oright.style.styleFloat="right";
  }
  else{
    oleft.style.cssFloat="left";
    oright.style.cssFloat="right";
  }
} 
</script> 
</head> 
<body> 
<div id="left"></div>
<div id="right"></div>
</body> 
</html>

不用style.float這種形式，因為float是JavaScript保留字，要使用其他的形式替代。

當前，IE瀏覽器都支援styleFloat，而IE9+、谷歌或者火狐等標準瀏覽器都支援cssFloat方式，上面程式碼實現全相容。

相關文章