js獲取非行間樣式

時間 2019-11-09

原文原文鏈接

咱們都知道js獲取行間樣式的方法，那麼js是如何獲取行距樣式的呢？javascript

首先讓咱們看一下js是如何獲取行間樣式的:css

　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　　<html xmlns="http://www.w3.org/1999/xhtml">
　　　<head>
　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　　<title>獲取行間樣式</title>
　　　<script>
　　　window.onload=function ()
　　　{
　　　	var oDiv=document.getElementById("div1");
　　　	alert(oDiv.style.width);
　　　}
　　　</script>
　　　</head>
　　　
　　　<body>
　　　<div id="div1" style="width:200px; height:200px; background:red;"></div>
　　　</body>
　　　</html>

你們運行代碼能夠看到咱們這樣就獲取到了div的行間樣式的寬度爲200px，那麼若是咱們如今寫的不是行間樣式還能獲取到div的樣式嗎？咱們把上面的代碼變一下，代碼以下：html

　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　　<html xmlns="http://www.w3.org/1999/xhtml">
　　　<head>
　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　　<title>獲取行間樣式</title>
　　　<style>
　　　#div{width:200px; height:200px; background:red;}
　　　</style>
　　　<script>
　　　window.onload=function ()
　　　{
　　　	var oDiv=document.getElementById("div1");
　　　	alert(oDiv.style.width);
　　　}
　　　</script>
　　　</head>
　　　
　　　<body>
　　　<div id="div1"></div>
　　　</body>
　　　</html>

咱們運行代碼能夠看到在這種狀況下咱們是沒法獲取到div的寬度屬性值了，若是咱們想要在如今的狀況下獲取到div的寬度屬性值，咱們又應該怎麼操做呢？解決方案：引入currentStyle；咱們把上面的代碼改一下，代碼以下：java

　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　　<html xmlns="http://www.w3.org/1999/xhtml">
　　　<head>
　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　　<title>獲取非行間樣式</title>
　　　<style>
　　　#div1{width:200px; height:200px; background:red;}
　　　</style>
　　　<script>
　　　window.onload=function ()
　　　{
　　　	var oDiv=document.getElementById("div1");
　　　	alert(oDiv.currentStyle.width);
　　　}
　　　</script>
　　　</head>
　　　
　　　<body>
　　　<div id="div1"></div>
　　　</body>
　　　</html>

咱們在運行代碼，OK，IE裏面如今是沒問題，證實上面的代碼很好用，可是當咱們用FF瀏覽器打開的時候，頁面出問題了，在這兒補充一點：但凡是好用的代碼99%以上不兼容，那麼咱們怎麼辦？解決方案：引入getComputedStyle；getComputedStyle（oDiv， false）.width;第一個參數要獲取物體的樣式，第二個暫時沒發現有什麼用處，能夠隨便放；咱們把上面代碼修改一下，代碼以下：web

　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　　<html xmlns="http://www.w3.org/1999/xhtml">
　　　<head>
　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　　<title>獲取非行間樣式</title>
　　　<style>
　　　#div1{width:200px; height:200px; background:red;}
　　　</style>
　　　<script>
　　　window.onload=function ()
　　　{
　　　	var oDiv=document.getElementById("div1");
　　　	alert(oDiv.getComputedStyle(oDiv, false).width);
　　　}
　　　</script>
　　　</head>
　　　
　　　<body>
　　　<div id="div1"></div>
　　　</body>
</html>

咱們運行代碼能夠看到FF已經沒問題，可是接下來看個人IE瀏覽器，又出現問題，說明我們用的這兩個方法都是不兼容的，因此咱們要找到一種解決辦法，讓全部的瀏覽器都要兼容。咱們再把上面的代碼作一下修改，代碼以下：瀏覽器

　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>獲取行間樣式</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
 if(obj.currentStyle)
 {
 return obj.currentStyle[attr];
 }
 else
 {
 return getComputedStyle(obj,false)[attr];
 }
}
window.onload=function()
{
 var oDiv=document.getElementById('div1');
 alert(getStyle(oDiv,'width'))
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

好的，如今咱們再運行代碼試一下，IE、FF都沒有問題了，固然你也能夠測試更多瀏覽器，徹底是沒問題。到此我們就能夠完美的獲取到div的非行間樣式了。測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。