javascriptBOM编程

最新推荐文章于 2024-09-24 10:17:01 发布

钟意

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量76

点赞数 3

文章标签： html javascript html5

本文链接：https://blog.csdn.net/m0_61857264/article/details/123211836

版权

	 function fn1() {
      
        var d=document.getElementById("d1")//获得样式表中div的id
        d.style.background="yellow"//用id直接设置背景颜色
    }

(2) 通过标签名

function f1(a1){
	  console.log(a1);
	  var a=document.getElementsByTagName("input");//通过标签名
	  for(let i of a){//遍历标签中每一个属性
		  i.value=a1;
	  }
  }

（3）通过标签中的class(类)属性

	function f3(){
		var ds=document.getElementsByClassName("a1")//类名
		for(let a of ds){
			a.style.backgroundColor="Purple";//遍历类名中的每一个属性
		}
	}

二. 常用事件

onclick:点击事件

ondblclick:双击事件

onfocus:获得焦点事件

onbliur:失去焦点事件

onmouseover:鼠标移入

onmouseout:鼠标移出

三.常用属性

textContent:标签中的文本内容（不识别HTML属性）

innerHTML:标签中的HTML内容(识别HTML属性)

value:元素中的值

checked:是否被选中(单选框，复选框)

style:标签中的样式属性

四.控制元素的现实

none:不显示（不被分配空间）

block:以块状元素显示

inline:以行内元素显示

inline-block:以行块显示

visable;显示

hidden:隐藏（分配空间）

opcity:设置透明度取值范围(0,1)

五.例题

（1）.实现左侧菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
			<ul>
			  <li <i onclick="f1('d')">家电</i></li>
			  <ul id="d">
			  	<li>hsah</li>
				<li>hsah</li>
				<li>hsah</li>
			  </ul>
			</ul>
			<script type="text/javascript">
				function f1(id){
					var a=document.getElementById(id)
					if(a.style.display==="none"){
						
						a.style.display="block";
					}
					else{
						a.style.display="none"
					}
				}
				
				
			</script>
			
	</body>
</html>

（2）.实现表格中全选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><td><input type="checkbox" name="" id="a" value="" onclick="f1(this.checked)" ></td>
			<td><input type="checkbox" name="" id="a" value="" ></td>
			<td><input type="checkbox" name="" id="a" value="" ></td>
			<td><input type="checkbox" name="" id="a" value="" ></td></tr>
			
	
		</table>
		<script type="text/javascript">
			function f1(a1){
				
				var a=document.getElementsByTagName("input");
				for(let i of a){
					i.checked=a1;
				
				}
				
			}
		</script>
	</body>
</html>

（3）图片来回切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 300px;
            background: url("images/a0.jpg") center/cover;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<img id="m1" src="images/a0.jpg" alt="" width="200px">
<button onclick="fn1()">点我更改图片</button>
<script>
    var b=1;
    //箭头函数就是正常函数的简写
    setInterval(()=>{
        //操作元素（html）的css
        d1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'
        b++;
    },1000)

    function fn1(){
        //操作属性
        m1.src="images/a1.jpg"
    }
</script>
</body>
</html>