js獲取內邊距值_求js代碼單擊a元素之後獲取b元素左邊距然後使b元素左邊距等於原本邊距加上100px

1. javascript如何獲取頁面的高度和寬度

window.outerHeight 窗口總高度和window.screen.availHeight一樣
window.innerHeight 窗口可視區域高度
window.screen.height 顯示器屏幕高版度
另外：權jquery獲取高度
$(".thisCrumbs").height()

元素本身高度
$(".thisCrumbs").innerHeight()

元素高度+內邊距
$(".thisCrumbs").outerHeight()

元素高度+內邊距+邊框
$(".thisCrumbs").outerHeight(true)
元素高度+內邊距+邊框+外邊距

2. javascript 如何獲得padding 與margin

獲取padding方法如下：
$(document).ready(function () {
var $h1 = $('h1');
console.log($h1);
$h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
$h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});

獲取margin方法如下
var margT = jQuery(this).css('margin');

css中padding和margin的區別
margin 外邊距
border 邊框
padding 內邊距
也就是說設置margin 那麼他所佔據的空白地方會是在邊框外面

3. js獲取margin值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<style type="text/css">
.ul1{

height:50px;
list-style-type:none;
margin-top:2px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
.li1{
width:46px;
float:left;
margin-left:2px;
border-top:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
height:46px;
list-style-type:none;
text-align:center;
line-height:46px;
}
</style>
<script>
function aa(num){
var bombs = new Array(num);
var flag = 0;
while( flag < num ){
bomb = Math.round(Math.random()*(num*num-1));
var f = true;
for(var i = 0 ; i <=flag ; i++){
if(bomb == bombs[i]){
f = false;
break;
}
}
if(f){
bombs[flag++] = bomb;
}
}
return bombs;
}
function createDiv(num,bombs){
var pDiv = document.getElementById("pdiv");
for(i = 0 ; i < num ; i++){
var flag = false;
var newUl = document.createElement("ul");
newUl.className = "ul1";
for(j = 0 ; j < num ; j++){
var newLi = document.createElement("li");
newLi.className = "li1";
newLi.id = "li" + (i*num + j);

flag = 0;
for(k = 0 ; k < num ; k++){
if(bombs[k] == (i*num + j)){
flag = true;
break;
}
}
if(flag){
var newtext = document.createTextNode(-1);
}else{
var newtext = document.createTextNode(0);
}
newLi.appendChild(newtext);
newUl.appendChild(newLi);
}
pDiv.appendChild(newUl);
}
}
function creatBox(num){
var bombs = aa(num);
createDiv(num,bombs);
return bombs;
}
function play(num){
var bombs = creatBox(num);
var temps = new Array(num*num -1);
for(i = 0 ; i < num*num; i ++){
temps[i] = 0;
}
for( j = 0 ;j < num; j++){
temps[bombs[j]] = -1;
}
lis = document.getElementsByTagName("li");
for(i = 0 ; i < lis.length ; i++){
lis[i].onclick=function ss(){
liid = this.id;
num = parseInt(liid.substring(2));
if(temps[num] == -1){
alert("你踩到雷了");
}else{
alert(temps[num]);
}
}
lis[i].oncontextmenu=function tt(){
liid = this.id;
num = parseInt(liid.substring(2));
if(temps[num] == -1){
alert("你排到雷了");
}else{
alert(temps[num]);
}
return false;
}
}
}
function myplay(){
var pDiv = document.getElementById("pdiv");
pDiv.innerHTML = "";
num = parseInt(document.getElementById("nd").value);
play(num);
}
</script>
<select name="nd" onchange="myplay()" id="nd">
<option value="4">簡單</option>
<option value="10">中等</option>
<option value="20">難</option>
</select>
</head>
<body>

<div id="pDiv">
</div>
<script language="javascript">
play(6);
</script>
</body>
</html>
最近學dom寫的一個小代碼，本來是寫掃雷的，也沒寫完，你看看，我現在就是點擊li，顯示li里的內容，運行一下就知道了
原理還是創建li的時候給它加上id
var newLi = document.createElement("li");
newLi.className = "li1";
newLi.id = "li" + (i*num + j);

然後取的時候根據id取就可以了
lis = document.getElementsByTagName("li");
for(i = 0 ; i < lis.length ; i++){
lis[i].onclick=function ss(){
liid = this.id;
num = parseInt(liid.substring(2));
if(temps[num] == -1){
alert("你踩到雷了");
}else{
alert(temps[num]);
}
}
}

4. js 獲取div所填充內容的實際高度

<html>
	<head>
		<title>js獲取div所填充內容的實際高度</title>
	</head>
	<body>
		<divid="div1">
			網路知道是一個基於搜索的互動式知識問答分享平台，於2005年6月21日發布，並於2005年11月8日轉為正式版。網路知道一直探索國際化發展，於2012年3月31日發布網路知道台灣版。
		</div>
		<buttontype="submit"onclick="test()">點擊獲取</button>
		<scripttype="text/javascript">
			functiontest(){
		varoDiv=document.getElementById('div1');
		alert(oDiv.offsetHeight);
		}
		</script>
	</body>
</html>

下面結合各上圖介紹一下各個屬性的作用:
一.offsetTop屬性:
此屬性可以獲取元素的上外緣距離最近採用定位父元素內壁的距離，如果父元素中沒有採用定位的，則是獲取上外邊緣距離文檔內壁的距離。所謂的定位就是position屬性值為relative、absolute或者fixed。
返回值是一個整數，單位是像素。
此屬性是只讀的。
二.offsetLeft屬性:
此屬性和offsetTop的原理是一樣的，只不過方位不同，這里就不多介紹了。
三.offsetWidth屬性:
此屬性可以獲取元素的寬度，寬度值包括:元素內容+內邊距+邊框。不包括外邊距和滾動條部分。
返回值是一個整數，單位是像素。
此屬性是只讀的。
四.offsetHeight屬性:
此屬性可以獲取元素的高度，寬度值包括:元素內容+內邊距+邊框。不包括外邊距和滾動條部分。
返回值是一個整數，單位是像素。
此屬性是只讀的。
五.clientWidth屬性:
此屬性可以返回一個元素的寬度值，值是:元素的內容+內邊距。不包括邊框、外邊距和滾動條部分。
返回值是一個整數，單位是像素。
此屬性是只讀的。
六.clientHeight屬性:
此屬性可以返回一個元素的高度值，值是:元素的內容+內邊距。不包括邊框、外邊距和滾動條部分。
返回值是一個整數，單位是像素。
此屬性是只讀的。
七.scrollLeft屬性:
此屬性可以獲取或者設置對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離，也就是元素被滾動條向左拉動的距離。
返回值是一個整數，單位是像素。
此屬性是可讀寫的。
八.scrollTop屬性:
此屬性可以獲取或者設置對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離，也就是元素滾動條被向下拉動的距離。
返回值是一個整數，單位是像素。

5. 關於js獲取元素實際高度的問題

對於元素的實際大小，offsetWidth和offsetHeight理解如下：
1.增加邊框，最終值會等於原本大小加上邊框大小
2.增加內邊距，最終值會等於原本大小加上內邊距大小

6. javascript 獲得padding的值，求助~~~~~

<body>
	<divstyle="width:100px;height:100px;background:#ccc;padding-left:20px;"
</body>
<scripttype="text/javascript">
	varoDiv=document.getElementsByTagName('div')[0];
	console.log(oDiv.offsetWidth-parseInt(oDiv.style.width));
</script>

7. JavaScript 怎麼獲取元素的寬度

假設，有如下 html代碼：

<!DOCTYPEhtml>
<html>
<body>
<divid="divTest"style="width:80%;background-color:#06F">
<h1>我的第一段JavaScript</h1>
<pid="demo">
JavaScript能改變HTML元素的內容。
</p>
</div>
<buttontype="button"onclick="myFunction()">點擊這里</button>
</body>
</html>

則獲取 div元素的百分比寬度代碼如下：

<script>
functionmyFunction()
{
x=document.getElementById("divTest");//找到元素
alert(x.style.width);//獲取style中的width
}
</script>

效果如圖：

8. jq獲取元素的寬高（內邊距和外邊距）

width()返回元素的寬度

height()返回元素的高度

innerWidth()返回元素的寬度（包括內邊距）

innerHeight()返回元素的高度（包括內邊距）

outerWidth()返回元素的寬度（包括內邊距和邊框）

outerHeight()返回元素的高度（包括內邊距和邊框）

outerWidth(true)返回元素的寬度（包括內邊距、邊框和外邊距）

outerHeight(true)返回元素的高度（包括內邊距、邊框和外邊距）

$(document).height()返迴文檔（HTML 文檔）的高度

$(window).height()返回窗口（瀏覽器視口）的高度

9. js 怎麼reset內外邊距

<html>
<head>
<title></title>
<scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
<scripttype="text/javascript">
	$(document).ready(function(){
		$("#change").click(function(){
			$("*").css({"margin":"0","padding":"0"});
		});
	});
</script>
</head>
<body>
<divstyle="width:500px;margin-left:20px;padding:50px;height:300px;background-color:red"></div>
<divstyle="width:500px;margin-left:50px;padding:40px;height:300px;background-color:blue"></div>
<inputtype="button"value="change"id="change">
</body>
</html>

10. 求js代碼，單擊a元素之後獲取b元素左邊距，然後使b元素左邊距等於原本邊距加上100px,麻煩給完整些的答案

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>無標題文檔</title>
<scripttype="text/javascript">
<!--
varMaxLeft=1000;//最大邊距值
varStepping=100;//步進邊距值
/*上面的值可以改動，下面的代碼就不要改了*/
varMargin=0;//原邊距
$=function(id){returndocument.getElementById(id);}
window.onload=function(){
$('a').onclick=function(){
Margin=parseInt($('b').style.left);//取得B元素當前左邊距
if(Margin>=MaxLeft){//如果當前邊距大於等於設定的最大邊距
$('b').style.left='0px';//設置左邊距為0
$('view').innerHTML=0;//這個只是個顯示作用，可以刪除
}else{//否則
$('b').style.left=(Margin+Stepping)+'px';//給原邊距加上設定的步進值
$('view').innerHTML=(Margin+Stepping);//這個只是個顯示作用，可以刪除
}
};
};
//-->
</script>
</head>
<body>
<buttontype="button"id="a">A元素</button>
<divid="b"style="width:500px;height:350px;background:#060;position:relative;z-index:0;top:100px;left:0px;line-height:350px;color:#fff;font-weight:bold;text-align:center">B元素，左邊距：<spanid="view">0</span>px</div>
</body>
</html>

經過測試，在ie12、 360極速和兼容模式下都正常運行，其他瀏覽器就不知道了，沒有測試！

導航:首頁 > 編程語言 > js獲取內邊距值

js獲取內邊距值

與js獲取內邊距值相關的資料

友情鏈接