<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{color: red}
.blue{color: blue}
.green{color:green}
.underline{text-decoration: underline}
</style>
<script>
window.onload=function()
{
document.querySelector("#add").onclick=function()
{
document.querySelector("li").classList.add("blue");
document.querySelector("li").classList.add("underline");
var a =document.querySelector("li").classList.item(0);
console.log(a);
}
document.querySelector("#remove").onclick=function()
{
document.querySelector(".red").classList.remove("red");
// document.querySelector("#id")
// document.querySelector(".class")
// document.querySelector("span")
}
document.querySelector("#toggle").onclick=function()
{
document.querySelectorAll("li")[2].classList.toggle("green");
}
document.querySelector("#contain").onclick=function()
{
var isContain= document.querySelectorAll("li")[2].classList.contains("red");
}
}
</script>
</head>
<body>
<ul>
<li >前端与移动开发</li>
<li class="red">java</li>
<li>javascript</li>
<li>c++</li>
</ul>
<input type="button" value="为第一个元素添加样式" id="add">
<input type="button" value="为第二个元素添加样式" id="remove">
<input type="button" value="为第三个元素添加样式" id="toggle">
<input type="button" value="为第四个元素添加样式" id="contain">
</body>
</html>14-HTML5-操作元素类样式
猜你喜欢
转载自blog.csdn.net/qq_31741481/article/details/86674959
今日推荐
周排行