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获取内边距值相关的资料

友情链接