<ul>
<li>请选择</li>
<li class="red">前00232323端</li>
<li class="green">后4444端</li>
<li class="blue">P5555HP</li>
<li id="android">An6666droid</li>
<li>iO8888S</li>
</ul>
<script type="text/javascript">
// 获取第一个li标签. 但是索引不直观,都是后台动态获取,前台动态生成添加.
window.onload = function() {
/* var cli = document.getElementsByTagName("li")[0];
console.log(cli); */
// Selector选择器,传入选择器名称,如果获取的元素不止一个,那么只会返回满足条件的第一个元素
// 参数要求:如果是类选择器,必须添加. 如果是id选择器,必须添加#, 否则当标签处理
var javaLi = document.querySelector(".red");
console.log(javaLi);
var andr = document.querySelector("#android");
console.log(andr);
// 查询符合条件的所有元素-- 数组.
var all = document.querySelectorAll("li");
console.log(all);
}
</script>
操作元素的类样式：add，remove，toggle，contain
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过classlist 增加，删除，样式</title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>前端1111</li>
<li class="blue">PHP2222</li>
<li>后端3333</li。>
<li id="android">Android 4444</li>
</ul>
<input type="button" id="add" value="为第一个li添加样式" /><br>
<input type="button" id="remove" value="为第2个li移除样式" /> <br>
<input type="button" id="toggle" value="为第3个li切换样式" /><br>
<input type="button" id="contain" value="判断第4个元素是否包含某样式" /><br>
<script type="text/javascript">
// classlist 元素所有样式的列表
window.onload = function() {
// add：为元素添加指定名称的样式,一次只能添加1个样式
document.querySelector("#add").onclick = function() {
// 当前元素的所有样式列表-数组.
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
// document.querySelector("li").className="red underline";
/* 获取元素之前添加的样式 */
var result = document.querySelector("li").classList.item("0");
console.log(result);
}
// remove：为元素移除指定名称的样式（不是移除class属性，属性还在但样式没有）,一次只能移除1个样式
document.querySelector("#remove").onclick = function() {
// 当前元素的所有样式列表-数组.
document.querySelector(".blue").classList.remove("blue");
}
// toggle：切换元素的样式.如果元素之前没有指定名称的样式就添加; 如果有,就移除
document.querySelector("#toggle").onclick = function() {
// 当前元素的所有样式列表-数组.
document.querySelectorAll("li")[2].classList.toggle("blue");
}
// contain: 判断元素是否包含指定名称的样式,返回true false
document.querySelector("#contain").onclick = function() {
// 当前元素的所有样式列表-数组.
var isContain = document.querySelectorAll("li")[1].classList.contains("blue");
console.log(isContain);
}
}
</script>
</body>
</html>自定义属性的使用：
<!-- 定义规范 -->
<!--建议：
1、名称应该都使用小写，不要包含任何的大写字母
2、名称中不要有任何特殊符号
3、名称不要副作用数字
规范：
1、data-开头
2、data-后必须至少有一个字符，多个单词使用-连接
3、
-->
<p data-school-name="itcast">传智播客</p>
<!-- 取值 -->
<script type="text/javascript">
var p = window.onload=document.querySelector("p");
// 获取自定义属性值
// 将data-后面的单词使用驼峰命名法连接, 必须使用驼峰命名法获取值,否则可能获取不到值.
var value = p.dataset["schoolName"]; // 对应:data-school-name
console.log("--->" + value);
</script>
3246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
