当前位置： 首页 > news >正文

【前端】JavaScript入门及实战106-110

news 2025/8/26 11:48:29

文章目录

  • 106 a的索引问题
  • 107 使用DOM操作CSS
  • 108 读取元素当前的样式
  • 109 getStyle()
  • 110 其他样式操作的属性
  • 滚动条练习

106 a的索引问题

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<script type="text/javascript">	window.onload = function(){/*点击超链接以后，删除一个员工的信息			*/// 获取所有超链接var allA = document.getElementsByTagName("a");// 为每个超链接绑定一个单击响应函数for(var i = 0; i < allA.length; i++){/*for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕*/alert("for循环正在执行" + i);allA[i].onclick = function(){alert("响应函数正在执行" + i); // i = 3console.log(allA[i] == this); // false//alert(allA[i]);return false;			};}};				</script>	
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div>
</body>
</html>

107 使用DOM操作CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 200px;height: 200px;background-color: red;<!--background-color: red !important;-->}</style><script type="text/javascript">	window.onload = function(){/*点击按钮之后，修改box1的大小*/// 获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){/*通过JS修改元素的样式语法：元素.style.样式名 = 样式值注意：如果CSS样式中含有-，不合法，如background-color需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写border-top-width：borderTopWidth通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important*/box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";				};// 点击按钮2以后，读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function(){// 读取box1的样式/*语法：元素.style.样式名通过style属性读取和设置的都是内联样式，无法读取样式表中的样式*/alert(box1.style.width);};};</script>	
</head>
<body><button id="btn01">点一下1</button><button id="btn02">点一下2</button><div id="box1"></div>
</body>
</html>

108 读取元素当前的样式

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">	window.onload = function(){/*点击按钮之后，读取box1的样式*/// 获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){/*获取元素的当前显示的样式语法：元素.currentStyle.样式名它可以用来读取当前元素正在显示的样式谁生效获取谁如果当前元素没有设置该样式，则获取默认值currentStyle只有IE浏览器支持，其他浏览器都不支持*///box1.currentStyle.width = "200px"; // 错误alert(box1.currentStyle.width);/*在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用需要两个参数：1. 要获取样式的元素2. 可以传递一个伪元素，一般都传null该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如：没有设置width，他不会获取到auto，而是一个长度但是该方法不支持IE8及以下浏览器通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性*///var obj = getComputedStyle(box1, null);//alert(obj.width);//alert(getComputedStyle(box1, null).backgroundColor); // 正常浏览器//alert(box1.currentStyle.backgroundColor); // IE8的方式alert(getStyle(box1, "width"));};};/*定义一个函数，用来获取指定元素的当前的样式参数：1. obj 要获取的元素2. name 要获取的样式名*/function getStyle(obj, name){// 正常浏览器的方式//return getComputedStyle(obj, null)[name]; // 元素.style["属性"]// IE8的方式//return obj.currentStyle[name];//???}</script>	
</head>
<body><button id="btn01">点一下</button><div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>

109 getStyle()

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">	window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){var v = getStyle(box1, "width");alert(v);};};/*定义一个函数，用来获取指定元素的当前的样式参数：1. obj 要获取的元素2. name 要获取的样式名*/function getStyle(obj, name){	// 变量没找到就报错，属性没找到是undefinedif(window.getComputedStyle){// 正常浏览器的方式，具有getComputedStyle()方法return getComputedStyle(obj, null)[name];}else{// IE8的方式，没有getComputedStyle()方法return obj.currentStyle[name];}		//return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];/*if(obj.currentStyle){// 正常浏览器的方式，具有getComputedStyle()方法return obj.currentStyle[name];}else{// IE8的方式，没有getComputedStyle()方法return getComputedStyle(obj, null)[name];}*/		}</script>	
</head>
<body><button id="btn01">点一下</button><div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>

110 其他样式操作的属性

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}# box2 {padding: 100px;background-color: #bfa;}# box4 {width: 200px;height: 300px;background-color: #bfa;overflow: auto;}# box5 {width: 150px;height: 600px;background-color: yellow;}</style><script type="text/javascript">	window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){/*clientWidthclientHeight这两个属性可以获取元素的可见宽度和高度，这些属性都是不带px的，返回都是一个数字，可以直接进行计算，会获取元素的宽度和高度，包括内容区和内边距，					这些属性都是只读的，不能修改*/alert(box1.clientWidth);alert(box1.clientHeight);//box1.clientHeight = 300; // 无用/*offsetWidthoffsetHeight获取元素的整个高度和宽度，包括内容区，内边距和边框*/alert(box1.offsetWidth);/*offsetParent可以用来获取当前元素和定位父元素会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body*/var op = box1.offsetParent;alert(op.id); // box2/*offsetLeft当前元素相对于其定位父元素的水平偏移量offsetTop当前元素相对于其定位父元素的垂直偏移量*/alert(box1.offsetLeft); // 100/*scrollWeightscrollHeight可以获取元素整个滚动区域的宽度和高度*///alert(box4.clientHeight); // 300alert(box4.scrollHeight); // 600/*scrollLeft：可以获取水平滚动条滚动的距离scrollTop：可以获取垂直滚动条滚动的距离*/alert(box4.scrollLeft);alert(box4.scrollTop);//alert(box4.clientHeight); // 283alert(box4.scrollHeight); // 600//当满足scrollHeight - scrollTop = clientHeight时，说明垂直滚动条滚动到底了alert(box4.scrollHeight - box4.scrollTop); // 滚动条到底部：283//当满足scrollWidth - scrollLeft = clientWidth时，说明水平滚动条滚动到底了alert(box4.scrollHeight - box4.scrollTop); };};</script>	
</head>
<body><button id="btn01">点一下</button><br><div id="box4"><div id="box5"></div></div><br><div id="box3" style="position: relative;"><div id="box2" style="position: relative;"><div id="box1"></div></div></div>
</body>
</html>

滚动条练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#info {width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript">	window.onload = function(){/*当垂直滚动条到底时，表单项可用onscroll：该事件会在元素的滚动条滚动时触发*/var info = document.getElementById("info");var inputs = document.getElementsByTagName("input");info.onscroll = function(){// 检查垂直滚动条是否滚动到底if(info.scrollHeight - info.scrollTop == info.clientHeight){//滚动条滚动到底，使表单项可用/*disabled属性可以设置一个元素是否禁用true是禁用，false是不禁用*/inputs[0].disabled = false;inputs[1].disabled = false;}};};</script>	
</head>
<body><h3>欢迎亲爱的用户注册</h3><p id="info">请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议</p><!--如果为表单添加disabled="disabled"则表项将变为不可用的状态--><input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守<input type="submit" value="注册" disabled="disabled" />
</body>
</html>
http://www.lryc.cn/news/406533.html

相关文章：

  • git 版本回退-idea
  • [安洵杯 2019]easy_serialize_php
  • 2024年软件测试面试题大全【含答案】
  • 返回倒数第 k 个节点 - 力扣（LeetCode）
  • 12 前端工程化
  • 跨文档消息传递：WebKit中的Web通信新纪元
  • 面试题 33. 二叉搜索树的后序遍历序列
  • Web响应式设计———1、Grid布局
  • ESP32开发进阶: 训练神经网络
  • 全国区块链职业技能大赛国赛考题前端功能开发
  • 直接插入排序算法详解
  • sql手动自增id
  • 10_TypeScript中的泛型
  • Unity3D之TextMeshPro使用
  • K8S 上部署 Prometheus + Grafana
  • 雷军的逆天改命与顺势而为
  • Leetcode 11. 盛最多水的容器
  • Java笔试分享
  • LeetCode：对称的二叉树（C语言）
  • Postman中的API Schema验证：确保响应精准无误
  • 深入浅出WebRTC—GCC
  • leetcode日记（49）旋转链表
  • InteliJ IDEA最新2024版下载安装与快速配置激活使用教程+jdk下载配置
  • 【23】Android高级知识之Window(四) - ThreadedRenderer
  • Java-根据前缀-日期-数字-生成流水号（不重复）
  • 跟李沐学AI：卷积层
  • 使用RedisTemplate操作executePipelined
  • react-native从入门到实战系列教程一环境安装篇
  • 【Gin】精准应用：Gin框架中工厂模式的现代软件开发策略与实施技巧(下)
  • 国科大作业考试资料-人工智能原理与算法-2024新编-第十二次作业整理