一个div下有好几个div,知道其众一个div的css,该怎么获得这个div元素

一个div下有好几个div,知道其众一个div的css,该怎么获得这个div元素,第1张

可以直接选择带有对应css的div元素

如果已经知道这个div的class,可以用"divclass",其中class表示实际的类名。

如果不知道class,带有style属性,可以用"div[style=]",其中三个点表示style的内容。

啥叫克隆在div上的元素?

但是可以用如下代码获取div元素的位置:

var X = $('#DivID')offset()top;

var Y = $('#DivID')offset()left;

JavaScript原生方式获取元素,可以使用querySelector方法。

举例如下:

假设我定义了2层div。然后我来获取内层的那个div。

HTML:

<div id="name">

    <div></div>

</div>

JavaScript:

documentquerySelector('#name div'); //返回的就是内层div的对象了。

如有疑问,可继续追问。

原生JS有3种方式来获取元素:

getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了,我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }

这样就能处理一个元素含有多个classname的情况了

在指定的div内使用getElementsByTagName获取元素的主要代码为:

getElementById(div_id)getElementsByTagName(tag_name);

示例如下:

1、HTML结构

<div id="test">

id=test: <span>Glen</span><span>Tane</span><span>John</span><span>Ralph</span>

</div>

<div id="test1">

id=test0: <span>Glen1</span><span>Tane1</span><span>John1</span><span>Ralph1</span>

</div>

<input type='button' value='获取id为test的div下的span' onClick="fun()"/>

2、javascript代码

function fun(){

obj = documentgetElementById("test")getElementsByTagName("span");

str= [];

for(i=0;i<objlength;i++){

strpush(obj[i]innerHTML);

}

alert(str);

}

3、效果演示

可以使用jQuery的children方法来获取某个元素下的所有子元素。

工具原料:编辑器、浏览器

1、使用children方法可以获得选择器下的所有子元素,代码实例如下:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="/jquery/jqueryjs"></script>

<style>

  body { font-size:16px; font-weight:bolder; }

  p { margin:5px 0; }

</style>

</head>

<body>

  <div>

    <span>Hello</span>

    <p class="selected">Hello Again</p>

    <div class="selected">And Again</div>

    <p>And One Last Time</p>

  </div>

<script>$("div")children("selected")css("color", "blue");</script>

</body>

</html>

2、运行的结果是找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色,结果如下:

以上就是关于一个div下有好几个div,知道其众一个div的css,该怎么获得这个div元素全部的内容,包括:一个div下有好几个div,知道其众一个div的css,该怎么获得这个div元素、如何获取克隆在div上的元素的位置、如何用JS从外层div获取内层div等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存