JavaScript-DOM操作HTML、CSS

最新推荐文章于 2023-06-15 21:40:40 发布

囧娃程序员进阶记

最新推荐文章于 2023-06-15 21:40:40 发布

阅读量366

点赞数

分类专栏： HTML学习之JavaScript 文章标签： DOM javascript

本文链接：https://blog.csdn.net/jiongyixuan/article/details/50346575

版权

HTML学习之JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript能够改变页面中所有HTML元素、属性、CSS样式，能对页面中的所有事件做出反应。

DOM可以操作HTML，也可以操作CSS。

DOM操作HTML

通过id找到HTML元素：document.getElementById(" ");

通过标签找到HTML元素：document.getElementByTagName(" ");如果有很多个同样的标签，那么找到的标签是相同标签下的第一个。

改变属性则是innerHTML

之前用过document.write("")，但是值得注意的是，一旦使用了这个语句，则会覆盖之前的所有文档。

如下：

<body>
  <p>点击按钮前正常显示的一段文字</p>
  <p>家里煤气泄露了，忽然想起老师说的面对危险首先要让自己冷静，于是我做了几次深呼吸，结果煤气中毒了。</p>
  <p>你遇过最糟糕的追求方式是什么</p>
  <p>早上6点在宿舍楼下放1000响鞭炮</p>
  <button οnclick="demo01()">确定</button>
  <script>
    function demo01(){
		document.write("点击之后，覆盖之前的所有内容");
	}
  </script>

输出如下：点击之前

点击之后。。。。

全部被覆盖。。啥都没了

平时最常看见的是以下效果：

  <img id="03" src="4.5.2JavascriptDOM操作HTMLtupian01.jpg" />
  <button οnclick="demo03()">下一张</button>
  <script>
    function demo03(){
		document.getElementById("03").src="4.5.2JavascriptDOM操作HTMLtupian02.jpg"
	}
  </script>

输出如下：

DOM操作CSS：

document.getElementById(id).style.property = new style

<body>
  <div id="01" class="color">
    测试：改变背景颜色
  </div>
  <button οnclick="demo()">确定</button>
  <script>
    function demo(){
		document.getElementById("01").style.background="green";
	}
  </script>
</body>

输出如下：

→→

DOM EventListener

添加监听：addEventListener(): 移除监听：removeEventListener():

囧娃程序员进阶记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM操作HTML、CSS

JavaScript能够改变页面中所有HTML元素、属性、CSS样式，能对页面中的所有事件做出反应。 DOM可以操作HTML，也可以操作CSS。DOM操作HTML 通过id找到HTML元素：document.getElementById(" "); 通过标签找到HTML元素：document.getElementByTagName(" ");如果有很多个同
复制链接

扫一扫