js dom元素获取节点-白红宇

js dom元素获取节点

阅读量：7090 次

发布时间：2019-06-28

本文共 1121 字，大约阅读时间需要 3 分钟。

<!DOCTYPE html>

<html>

<head>

<title>js获取DOM元素的方法并设置样式</title>

* {

margin: 0;

padding: 0;

}

.wrap {

width: 600px;

height: 400px;

margin: 0 auto;

background-color: #E0E0E0;

padding-top: 10px;

}

div,p {

width: 400px;

height: 80px;

margin: 40px auto 0;

text-align: center;

}

</style>

window.onload = function (){

var box=document.getElementById("box");

box.style.backgroundColor="#f00";

box.style.color="#fff";

var test=document.querySelector(".test");

test.style.backgroundColor="#ff0";

test.style.color="#fff";

var p=document.getElementsByTagName("p");

p[0].style.backgroundColor="#666"; //通过标签名获取的元素需要声明index索引值，否则为undefine

p[0].style.color="#fff";

/*alert(p[0].innerHTML);*/

}

</script>

</head>

<body>

<div id="box">通过ID名获取DOM元素的节点,通过获取到的DOM元素设置背景颜色为#f00，颜色为#fff</div>

<div class="test">通过类名获取DOM元素的节点，通过获取到的DOM元素设置背景颜色为#ff0，颜色为#fff</div>

<p>通过标签获取DOM元素节点，通过获取到的DOM元素设置背景颜色为#666，颜色为#fff</p>

</div>

</body>

</html>

转载于:https://my.oschina.net/kitty0107/blog/1627183

你可能感兴趣的文章

Yahoo团队网站性能优化的35条黄金守则

查看>>

secureCrt Linux 文件传输

查看>>

JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

查看>>

hdu6078[优化递推过程] 2017多校4

查看>>

zabbix 配置报警方式

查看>>

Eclipse将android项目打包jar文件

查看>>

Spring Security实现RBAC权限管理

学习c/c++之 realloc (仅供参考)

查看>>

android学习笔记11（Adapter初级学习）

查看>>

Aizu 0121 Seven Puzzle (康托展开+bfs)

[HTTP趣谈]origin,referer和host区别

查看>>

python3中使用builtwith的方法（很详细）

查看>>

kettle 数据迁移 (转)

查看>>