Dom操作属性与内容

txy518

已于 2022-08-02 10:50:53 修改

阅读量158

点赞数 1

文章标签：前端 html javascript

于 2022-08-02 10:41:10 首次发布

本文链接：https://blog.csdn.net/weixin_71228058/article/details/126107404

版权

一：读取内联样式：

1．DOM(document object modern文档对象模型)

2.获取dom对象

Eg:如果用js操作html文档，先要将html转成js DOM对象

Var obj=document.getElementById(“link”); //获取dom对象

二：操作属性

1.操作

<script type="text/javascript">
		   window.onload = function(){
		    var linkObj = document.getElementById("link");
		    linkObj.href = 'http://www.baidu.com';
		    linkObj.title = 'baidu';
		    linkObj.innerHTML = '百度';
			linkObj.className="link"
		    console.log(linkObj.href,linkObj.title,linkObj.innerHTML);
		   }
		  </script>
	</head>
	<body>
		<a href="http//www.show.com " title="sohu" id="link">搜狐</ a>
	</body>

2.onmousover 鼠标经过 onmousout 鼠标离开

例1：利用函数

<script type="text/javascript">
		  function horse(){ // onmouseover  鼠标经过
		   var picObj = document.getElementById("pic");
		   picObj.src = 'img/horse.jpg'
		  }
		  function dog(){ // onmouseout  鼠标离开