✿✿✿JavaScript --- 常见样式案例

最新推荐文章于 2024-05-21 18:30:03 发布

naoguaziteng

最新推荐文章于 2024-05-21 18:30:03 发布

阅读量398

点赞数

分类专栏：前端基础知识(HTML/CSS/JS) 文章标签： javascript 前端

本文链接：https://blog.csdn.net/naoguoteng/article/details/128396276

版权

本文主要探讨了JavaScript在前端开发中的应用，包括下拉框、复选框、单选框的事件样式处理，禁止鼠标右键操作，点击按钮样式变化，表格颜色跟随鼠标，背景点击切换，内容展示控制，排他思想实现，全选反选功能，理解DOM事件中的currentTarget与target，阻止事件冒泡，事件捕获，阻止元素默认行为，以及各种交互效果如灯泡开关、图片跟随鼠标、省市联动、滚动特效和搜索框聚焦效果。内容实用，适合前端初学者及进阶者学习。

摘要由CSDN通过智能技术生成

<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			我是一段不愿意分享的文字我是一段不愿意分享的文字我是一段不愿意分享的文字<br />
			
			<input type="text" value="as发送发送" onselect="show4()"><br />
	
			<select name="" onchange="show()">
				<option value="">aaaaaa</option>
				<option value="">bbbbb</option>
				<option value="">ccccc</option>
				<option value="">ddddd</option>
				<option value="">eeeee</option>
	
			</select><br />
	
			<input type="radio" name="sex" value="1"> 男
			<input type="radio" name="sex" value="0"> 女<br />
	
			<input type="checkbox" name="hobby" value="sing" onchange="show3(this)"> 唱歌
	
			<script>
				//onchange 可以监听下拉框，下拉选中
				function show() {
					alert("选中了")
				}
	
				var arr = document.getElementsByName("sex");
				for (let i = 0; i < arr.length; i++) {
					arr[i].onchange = function() {
						var flag = this.checked;
						alert(flag);
					}
				}
	
				function show3(obj) {
					var f = obj.checked;
					alert(f);
				}
	
				function show4() {
					alert("文字被选中了")
				}
			</script>
			<script>
					// 1. contextmenu 我们可以禁用右键菜单
				document.addEventListener('contextmenu', function(e) {
					e.preventDefault();
				})
				// 2. 禁止选中文字 selectstart
				document.addEventListener('selectstart', function(e) {
					e.preventDefault();
			 })
			</script>
		</body>
</html>

2.点击按钮后样式发生变化

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="show(event)">按钮原本样式</button>
		<button id="btn3">点击按钮后的样式</button>
	</body>
	<script>
		//事件对象：由浏览器创建，我们可以拿来用
		function show(e) {
			//事件对象中属性
			var type = e.type; //获取事件类型
			alert(type);
		}

		var btn3 = document.getElementById("btn3")
		btn3.onclick = function(e) {
			btn3.style.color = "red";
			this.style.background = "yellow";
			e.target.style.height = "50px";
		}
	</script>
</html>

3.表格追随鼠标更换颜色


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标在哪儿哪儿就会变颜色</title>
		<style>
		        table {
		            width: 800px;
		            margin: 100px auto;
		            text-align: center;
		            border-collapse: collapse;
		            font-size: 14px;
		        }
		        
		        thead tr {
		            height: 30px;
		            background-color: skyblue;
		        }
		        
		        tbody tr {
		            height: 30px;
		        }
		        
		        tbody td {
		            border-bottom: 1px solid #d7d7d7;
		            font-size: 12px;
		            color: blue;
		        }
		        
		        /* #bg {
		            background-color: pink;
		        } */
		    </style>
	</head>
	<body>
		<table>
		        <thead>
		            <tr>
		                <th>代码</th>
		                <th>名称</th>
		                <th>最新公布净值</th>
		                <th>累计净值</th>
		                <th>前单位净值</th>
		                <th>净值增长率</th>
		            </tr>
		        </thead>
		        <tbody>
		            <tr class="trr">
		                <td>003526</td>
		                <td>农银金穗3个月定期开放债券</td>
		                <td>1.075</td>
		                <td>1.079</td>
		                <td>1.074</td>
		                <td>+0.047%</td>
		            </tr>
		            <tr class="trr">
		                <td>003526</td>
		                <td>农银金穗3个月定期开放债券</td>
		                <td>1.075</td>
		                <td>1.079</td>
		                <td>1.074</td>
		                <td>+0.047%</td>
		            </tr>
		            <tr class="trr">
		                <td>003526</td>
		                <td>农银金穗3个月定期开放债券</td>
		                <td>1.075</td>
		                <td>1.079</td>
		                <td>1.074</td>
		                <td>+0.047%</td>
		            </tr>
		            <tr class="trr">
		                <td>003526</td>
		                <td>农银金穗3个月定期开放债券</td>
		                <td>1.075</td>
		                <td>1.079</td>
		                <td>1.074</td>
		                <td>+0.047%</td>
		            </tr>
		            <tr class="trr">
		                <td>003526</td>
		                <td>农银金穗3个月定期开放债券</td>
		                <td>1.075</td>
		                <td>1.079</td>
		                <td>1.074</td>
		                <td>+0.047%</td>
		            </tr>
		            <tr class="trr">
		                <td>003526</td>
		                <td>农银金穗3个月定期开放债券</td>
		                <td>1.075</td>
		                <td>1.079</td>
		                <td>1.074</td>

最低0.47元/天解锁文章

naoguaziteng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
✿✿✿JavaScript --- 常见样式案例

1.下拉框复选框单选框的事件样式和禁止喜欢中文字与鼠标右键2.点击按钮后样式发生变化3.表格追随鼠标更换颜色4.点击更换背景5.点击不同的选择栏，内容展示在一个板块内6.排他思想，许多按钮，点击谁谁就有样式7.按钮全选反选8.currentTarget和target的区别9.阻止事件冒泡10.事件捕获11.阻止元素的默认行12.灯泡开关案例13.图片跟随鼠标14.省市二级联动15.滚动事件,滚动到一定位置出现特效16.获取焦点，点击搜索框出现闪
复制链接

扫一扫