怎么用JS获取某一个指定页面（非本页面）的HTML代码_框架

1、在浏览器中打开要调试的网页，然后点击”F12 Developer Tools“，也可以使用快捷键F12。

2、d出的工具窗口中，默认选择是Dom Explorer功能，它会列出网页的源代码和CSS样式列表。

3、使用元素定位功能选择页面中的一个元素，也会定位到源代码中位置。

4、对定位到的文字修改CSS样式，添加inline style，比如把字体变为红色。

5、查看元素已经应用的CSS样式，点击"computed"菜单。

6、然后查看元素的布局信息，点击"Layout"菜单。

1、clientWidth / clintHeight

clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight

clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom

注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）

注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）

2、clientTop / clientLeft

clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）

clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）

没有滑动条的效果代码如下：

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

</script>

</html>

以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)

有滚动条的代码如下,

在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

consolelog(contentObjclientTop);

consolelog(contentObjclientLeft);

</script>

</html>

最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)

201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)

3、offsetHeight / offsetWidth

offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度

注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjoffsetHeight);

consolelog(contentObjoffsetWidth);

consolelog(contentObjoffsetLeft);

consolelog(contentObjoffsetTop);

</script>

</html>

输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)

offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)

4、offsetTop / offsetLeft

offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离

offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离

5、scrollHeight / scrollWidth

scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值

scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding

6、scrollTop

scrollTop 元素滚动的距离

可以参考下面的代码：

<style>

a{display:block;float:left}

</style>

</div>

for(var i=1;i<6;i++){

documentgetElementById('a'+i)stylemarginTop = parseInt(documentgetElementById('a'+i)stylemarginTop)+5+'px';

}

</script>

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。

扩展资料：

javaScript参考函数

anchor("name")用来把字符串转换为HTML锚面标志内(<A NAME=>)

big() 把字符串中的文本变成大字体(<BIG>)

blink() 把字符串中的文本变成闪耀字体(<BLINK>)

bold() 把字符串中的文本变成乌字体(<B>)

fixed() 把字符串中的文本变成流动间距字体,便电报情势(<TT>)

fontcolor(color)设置字符串中文本的色彩(<FONT COLOR=>)

Fontsize(size) 把字符串中的文本变成指定大小(<FONTSIZE=>)

italics() 把字符串中的白原变成斜字体(<I>)

Link(url)用来把字符串转换-HTML链交标志中(<A HREF=>)

参考资料来源：百度百科-javascript

windowdocumentbodyclientHeight就可以

windowscreenavailWidth 返回当前屏幕宽度(空白空间)

windowscreenavailHeight 返回当前屏幕高度(空白空间)

windowscreenwidth 返回当前屏幕宽度(分辨率值)

windowscreenheight 返回当前屏幕高度(分辨率值)

windowdocumentbodyoffsetHeight; 返回当前网页高度

windowdocumentbodyoffsetWidth; 返回当前网页宽度

我们这里说说四种浏览器对 documentbody 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

=======================================================================

clientHeight与offsetHeight的区别

许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？

1 clientHeight和offsetHeight的值由什么决定？

假如我们有以下的DIV，主要显示的文字为"This is the main body of DIV"。

如上图所示，clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。

2 CSS中的Height值对clientHeight和offsetHeight有什么影响？

首先，我们看一下CSS中Height定义的是什么的高度。如在本文最后部分“APPENDIX示例代码”（注：以下称为“示例代码”）中，innerDIVClass的Height值设定为50px，在IE下计算出来的值如下所示。也就是说，在IE里面，CSS中的Height值定义了DIV包括padding在内的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定义的DIV实际内容的高度，padding并没有包括在这个值里面(70 = 50 + 10 2)。

in IE:

innerDivclientHeight: 46

innerDivoffsetHeight: 50

outerDivclientHeight: 0

outerDivoffsetHeight: 264

in Firfox:

innerDivclientHeight: 70

innerDivoffsetHeight: 74

outerDivclientHeight: 348

outerDivoffsetHeight: 362

在上面的示例中，也许你会很奇怪，为什么在IE里面outerDivclientHeight的值为0。那是因为示例代码中，没有定义outerDIVClass的Height值，这时，在IE里面，则clientHeight的值是无法计算的。同样，在示例代码中，如果将innerDIVClass中的Height值去年，则innerDIVclientHeight的值也为0。(注：在Firefox下不存在这种情况)。

如果CSS中Height值小于DIV要显示内容的高度的时候呢（当CSS中没有定义overflow的行为时）？在IE里面，整个clientHeight（或者offsetHeight）的值并没有影响，DIV会自动被撑大；而在Firefox里面，DIV是不会被撑开的。如在示例代码中，将innerDivClass的Height值设为0，则计算结果如下所示。IE里面的DIV被撑开，其clientHeight值等于内容的高度与padding2的和；而Firefox里面，文字将溢出DIV的边界，其clientHeight值正好是padding值的两倍。

In IE:

innerDivclientHeight: 38

innerDivoffsetHeight: 42

outerDivclientHeight: 0

outerDivoffsetHeight: 256

In Firefox:

innerDivclientHeight: 20

innerDivoffsetHeight: 24

outerDivclientHeight: 298

outerDivoffsetHeight: 312

windowonload = function(){

//把屏幕宽度赋值给该元素

documentgetElementById("float_banner")stylewidth = windowscreenwidth + 'px';

}

</script>

的却，在css代码页可以执行js代码，但是，不建议这样做

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<!--

var MaxLeft = 1000; //最大边距值

var Stepping = 100; //步进边距值

/上面的值可以改动，下面的代码就不要改了/

var Margin = 0; //原边距

$ = function( id ) { return documentgetElementById( id );}

windowonload = function() {

$('a')onclick = function(){

Margin = parseInt( $('b')styleleft ); //取得B元素当前左边距

if ( Margin >= MaxLeft ) { //如果当前边距大于等于设定的最大边距

$('b')styleleft = '0px'; //设置左边距为0

$('view')innerHTML = 0; //这个只是个显示作用，可以删除

} else { //否则

$('b')styleleft = (Margin + Stepping) + 'px'; //给原边距加上设定的步进值

$('view')innerHTML = (Margin + Stepping); //这个只是个显示作用，可以删除

}

};

//-->

</script>

</head>

<body>

</body>

</html>

经过测试，在ie12、 360极速和兼容模式下都正常运行，其他浏览器就不知道了，没有测试！

页面当中html 和body margin 和padding全部清零，如果还不行用documentdocumentElementclientHeight获取浏览器可视区域高度一样的。

以上就是关于怎么用JS获取某一个指定页面（非本页面）的HTML代码全部的内容，包括:怎么用JS获取某一个指定页面（非本页面）的HTML代码、JS中几种获取对象宽度和高度的区别、js获取css属性，更改margin-top属性，给每个a标签的margin-top属性在原基础上 +5px等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9693313.html

怎么用JS获取某一个指定页面（非本页面）的HTML代码

发表评论

评论列表（0条）