zoukankan      html  css  js  c++  java
  • 【选择符 API】querySelector() 方法

    querySelector() 方法接收一个 CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null。

    下面实现一个点击粉色盒子出现 “你好~” 文本。

      例 1  

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>API选择符</title>
    		<style>
    			#myDiv{
    				 100px;
    				height: 100px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="myDiv" onclick="fn()"></div>
    		<script>
    			function fn(){
    				document.querySelector("#myDiv").innerHTML = "你好~";
    			}
    		</script>
    	</body>
    </html>
    

    点击粉色盒子之后:

      例 2  

    点击粉色盒子之后:

    下面实现点击按钮之后第一个 p 元素的背景颜色变成粉色。

      例 3  

    点击按钮之后:

    第一个 p 元素的背景颜色变了。

      例 4  

    点击按钮之后:

    类为 sty1 的第一个 p 元素的背景颜色变为 greenyellow。

    通过 Element 类型调用 querySelector() 时,会在元素后代元素的范围内查找匹配的元素。

      例 1   

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>API选择符</title>
    	</head>
    	<body>
    		<div id="myDiv">
    			<p>你好~</p>
    			<p class="sty1">我是小许</p>
    			<p class="sty1">i am coding</p>
    			<button onclick="fn()">点击</button>
    		</div>
    		<script>
    			function fn(){
    				var a = document.getElementById("myDiv");
    				a.querySelector("p.sty1").style.backgroundColor = "greenyellow";
    			}
    		</script>
    	</body>
    </html>
    

    点击按钮之后:

  • 相关阅读:
    java中字符串截取
    Linux主机添加Windows字体
    oracle命令
    Oracle索引
    快速搜索多个word、excel等文件中内容
    oracle数据库修改字符集
    Linux服务器安装svn
    Linux定时任务增删改查等说明
    Linux按行读取文件内容
    linux远程通过shell脚本执行另一台linux机器上的shell文件
  • 原文地址:https://www.cnblogs.com/xiaoxuStudy/p/12869324.html
Copyright © 2011-2022 走看看