JS获取当前元素下面的子元素

最新推荐文章于 2024-05-29 21:52:44 发布

原创最新推荐文章于 2024-05-29 21:52:44 发布 · 6.4k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文通过一个具体的HTML页面示例，展示了如何使用CSS和jQuery来动态地修改网页中元素的样式，包括颜色和边框。示例中详细解释了如何选择特定的DOM元素并应用样式更改。

<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
    <div class="descendants" style="width:500px;">div (当前元素) 
        <p>p (儿子元素)
            <span>span (孙子元素)</span>     
        </p>
        <p>p (儿子元素)
            <span>span (孙子元素)</span>
        </p> 
    </div>
</body>
</html>

效果图：