javascript使用style方式如何設定和獲取元素的float浮動屬性

antzone發表於2017-03-29
JavaScript

不少朋友可能會發現，在使用style方式設定或者獲取元素的float屬性的時候達不到指定的效果。

下面就介紹一下如何解決此問題，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#softwhy{
  width:50px;
  height:50px;
  background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById("softwhy");
  odiv.style.float="right";
}
</script>
</head>
<body>
<div id="softwhy"></div>
</body>
</html>

程式碼在谷歌瀏覽器、IE等瀏覽器中都沒有問題，但是在當前的火狐瀏覽器中無效。

這是因為float是javascript的保留字，在火狐中需要使用cssFloat來獲取，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#softwhy{
  width:50px;
  height:50px;
  background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById("softwhy");
  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
    odiv.style.cssFloat="right";
  }
  else{
    odiv.style.cssFloat="right";
  } 
}
</script>
</head>
<body>
<div id="softwhy"></div>
</body>
</html>

上面的程式碼可以相容火狐瀏覽器，當然對於獲取float屬性值也是如此。

更多內容可以參閱getComputedStyle()和方法如何獲取float屬性值一章節。

相關文章