js如何获取页面 元素

js如何获取页面 元素,第1张

思路:用getElementsByTagName方法来实现。

片断代码如下:

<html>

<head>

<script type="text/javascript">

function getElements()

  {

  var x=documentgetElementsByTagName("input");

  alert(xlength);

  }

</script>

</head>

<body>

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<br />

<input type="button" onclick="getElements()" value="How many input elements" />

</body>

</html>

效果图如下:

定义和用法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

这要分两种情况:

1、按钮在div中。

我们可以通过:

var btn = documentgetElementById("btn");//获取按钮节点

var div = btnparentNode;//获取di元素,当然不一定div就是按钮的父元素,可以通过parentNode向上查找,最好还是给div加一个id2、按钮不在div中

我们可以通过:

//以上这种情况最好给div加一个id,通过以下方式获得

var div = documentgetElementById("div")

//如果不想加的话,以下方式

var divs = documentgetElementsByTagName("DIV");

var div = divsitem(n);//n表示要取的div,从0开始

<body style="height: 2000px;">

<div class="c f" onclick="fn()" style="border:10px solid #ccc;height: 80px;color:red;background:rebeccapurple"> 我是div</div>

<script>

        let div = documentquerySelector('div');

        / 通过style在行内样式上获取样式 /

        / 使用style获取样式 写的什么 就能获取到什么

        不会转成rgb 和 出现其他的样式 /

        consolelog('style',divstylecolor )

        consolelog('style',divstylebackground )

        / style是获取不到在内部样式上或者外部样式上的样式的 /

        // consolelog( divstylecolor )

        // / font-size js中要是用驼峰的方式获取 /

        // consolelog( divstylefontSize )

        / 使用windowgetComputedStyle可以获取行内、内部、外部的所有样式

        但是 获得color是rbg格式的,获取的background是所有属性 /

        consolelog( windowgetComputedStyle(div,null)color )

        consolelog( windowgetComputedStyle(div,null)fontSize )

        consolelog( windowgetComputedStyle(div,null)background )

        consolelog( windowgetComputedStyle(div,null)height )

        // documentonscroll = function (){

        //    consolelog(documentdocumentElementscrollTop);

        // }

</script>

以上就是关于js如何获取页面 元素全部的内容,包括:js如何获取页面 元素、JavaScript如何获取按钮所在的div元素、js之获取元素样式等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9868751.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-02
下一篇2023-05-02

发表评论

登录后才能评论

评论列表(0条)

    保存