javascript和css的互换

最新推荐文章于 2022-04-11 22:05:14 发布
最新推荐文章于 2022-04-11 22:05:14 发布
阅读量69 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoji1346790/article/details/124108204
版权
这篇博客通过三个课堂案例展示了如何利用JavaScript和CSS动态地改变网页元素的样式。案例1中，通过className切换实现图片边框颜色变化；案例2中，利用onmouseover和onmouseout事件改变li元素的背景图像和文字颜色；案例3中，直接通过style属性修改li元素的背景图像。这些例子说明了JavaScript与CSS结合在交互式网页设计中的应用。
摘要由CSDN通过智能技术生成

javascript和css的互换

样式表的基本语法

标签选择器:

input{
   width:120px;
   border:solid 1px #ff0000;
}

ID选择器:

#flow{color:#ff0000}

类选择器:

.center{
   text-align:center;
   font-weight:bold;
}

常见样式

课堂案例1：改变图片边框样式

	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 改变图片边框 */
			.sa{
				border: 2px solid red;
			}
			/* 恢复图片边框 */
			.sb{}
		</style>
		<!-- <script type="text/javascript"> -->
			<!-- // // 改变图片边框 -->
			<!-- // function changeImage(obj){ -->
			<!-- // 	obj.className="sa"; -->
			<!-- // } -->
			<!-- //  // 恢复图片边框 -->
			<!-- // function hf(obj){ -->
			<!-- // 	//获取图片 -->
			<!-- // 	obj.className="sb"; -->
			<!-- // }	 -->
		</script>
	</head>
	<body>
		<img onmouseleave="this.className='sb'" onmousemove="this.className='sa'" src="img/new_01.jpg" />
		<img onmouseleave="this.className='sb'" onmousemove="this.className='sa'" src="img/new_02.jpg" />
		<img onmouseleave="this.className='sb'" onmousemove="this.className='sa'" src="img/new_03.jpg" />
	</body>
</html>

课堂案例2：使用className改变样式表

	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				font-size: 12px;
				color: #FFFFFF;
				background-image: url(img/bg1.gif);
				background-repeat: no-repeat;
				text-align: center;
				height: 33px;
				width: 104px;
				line-height: 38px;
				float: left;
				list-style: none;
			}
			.out{
				background-image: url(img/bg1.gif);
			}
			.over{
				background-image: url(img/bg2.gif);
				color: #ffff00;
				font-weight: bold;
				cursor: hand;
			}
		</style>
	</head>
	<body>
		<ul>
			<li onmousemove="this.className='over'" onmouseout="this.className='out'">资讯动态</li>
			<li onmousemove="this.className='over'" onmouseout="this.className='out'">产品世界</li>
			<li onmousemove="this.className='over'" onmouseout="this.className='out'">市场营销</li>
		</ul>
	</body>
</html>

课堂案例3：使用style改变样式表

	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				font-size: 12px;
				color: #ffffff;
				background-image: url(img/bg1.gif);
				background-repeat: no-repeat;
				text-align: center;
				height: 33px;
				width: 104px;
				line-height: 38px;
				float: left;
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">资讯动态</li>
			<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">产品世界</li>
			<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">市场营销</li>
		</ul>
	</body>
</html>`
zhaoji1346790
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js--javascript和css的互换
long_2004的博客
04-11 942
js--javascript和css的互换1.JavaScript中常用的事件列表2.跟换菜单背景案例3.广告随鼠标滚动案例 1.JavaScript中常用的事件列表 onclick(当用户单击某个对象时调用事件) onmouseover(鼠标移到某元素之上) onmouseout(鼠标从某元素移开) onmousedown(鼠标按钮被按下) 2.跟换菜单背景案例 <style type="text/css"> .sa{ background-image: url(img/bg2.g
js-javascript和css的互换
Q_3344的博客
04-11 774
javascript和css的互换样式表的基本语法常见样式课堂案例1：改变图片边框样式课堂案例2：使用className改变样式表课堂案例3：使用style改变样式表 样式表的基本语法 标签选择器: input{ width:120px; border:solid 1px #ff0000; } ID选择器: #flow{color:#ff0000} 类选择器: .center{ text-align:center; font-weight:bold; } 常见样式 课堂案例1
CSS转换和JavaScript
cungui5726的博客
08-16 227
The end of the fall semester was particularly disappointing, at least in regards to my second year students. While the usual factors were at play – lack of attention to detail (or lack of any kind of ...
Transform-Css:将 Css 变换转换为 Js，获取 translatescalerotate 的当前变换
06-16
转换-CSS 通过平移/缩放/旋转操作将 Css 转换为对象。 不需要deps。 要使用此库，您需要将 Css 添加到 $.css 或 el.style。 如果在 css 文件中添加，el.style 返回矩阵元素。 使用： new Transform ( obj ) ; 输入可用： // dom classic var obj = document . getElementById ( 'test' ) ; // jQuery var obj = $ ( '#test' ) ; // object var obj = { translateX : '10px' , translateY : 10 } ; // string var obj = 'transform: translateX(10px) translateY(10px)' ; 方法 ： var transf
静态补充CSS类型转换与JS深拷贝与浅拷贝
lwaner的博客
10-21 152
静态补充CSS类型转换 常用的块级元素 常用的块级block标签： <hn>...</hn> 标题标签 <hr> 水平分割线 <p>...</p> 段落 <ul>...</ul> 无序列表 <ol>...</ol> 有序列表 <dl>...</dl> 定义列...
javascript之鼠标拖动位置互换效果代码
10-30
在本文中，我们将探讨javascript之鼠标拖动位置互换效果代码的实现方法，包括HTML、CSS和JavaScript三方面的内容。 一、HTML结构 在HTML结构中，我们使用div元素来创建容器和项元素，用于存放要交换位置的元素。...
JS+CSS案例：实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器
最新发布
08-09
功能介绍 a.... b.自动处理数字输入：文本框允许直接...资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、CSS+JS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。
24-分层和合成机制：为什么CSS动画比JavaScript高效？_For_vip_user_0011
08-04
CSS动画与JavaScript的渲染机制之分层和合成机制 CSS动画与JavaScript都是我们常用的两种技术来实现动画效果，但是它们在渲染机制上有着很大的区别。今天我们来探讨CSS动画为什么比JavaScript高效。 首先，让我们...
CSS3实现swap交换动画
09-24
这种动画效果在JavaScript中也是常见的，CSS3的优势在于它可以无需JavaScript即可实现这样的动画效果，简化代码的同时还能够保持较高的性能。 通过这样的步骤，我们就能实现一个简单的swap动画效果，从而为网页设计...
js表单文本框内容互换代码.zip
11-24
总的来说，"js表单文本框内容互换代码"是一个关于前端开发的实践案例，它涉及了HTML5表单、CSS样式以及JavaScript和jQuery的交互操作。这个例子对于学习前端开发，尤其是对表单交互有需求的开发者来说，是一个很好的...
cssinjspackage用于将CSS转换为JS样式的Atom插件反过来也可以
08-10
css-in-js package 用于将CSS转换为JS样式的Atom插件，反过来也可以
css-to-js-object:实验性的
06-25
css 到 js 对象 实验性：将 css 转换为 JS 对象。 灵感来自： : 。 安装 npm install css-to-js-object 例子 从： . modal { border-style : dotted; } . header { color : yellow; } . body { background : green; } . footer , . another { border : 1 px solid green; border-radius : 7 px ; } . something . else { transform : translateZ ( 0 ); } # tag { margin : 10 px ; padding : 20 px ; color : green; } test-pilot {
转转转js_css属性
程涛
04-11 107
[code="java"] JS中CSS Style标签对照表 Posted by Kevin | Filed under HTML/CSS/JS | 2009-02-12 写js时会用到，如果发现自己想要的效果没有实现，而程序没问题的话，就参照下此表对应看下标签是否正确。 盒子标签和属性对照 css语法 (不区分大小写) JavaScript语法 (区分大小写) borde...
css中的变量导出到js中
jiaway的博客
08-11 833
在js 中 import variables
css expression 改成js,expression将JS、Css结合起来_CSS/HTML
weixin_28791139的博客
08-04 150
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员...
webpack 打包css文件
qq_33745501的博客
05-10 7123
在webpack中，每个文件都是一个模块（css、js、html、jpg、less）。对于不同的模块使用不同的加载器.文章中使用的版本：node：4.6.0，webpack 4.6.0文章中的配置：安装 webpack-dev-server一、直接打包css1.、安装加载器npm install css-loader --save-dev npm install style-loader --sa...
将CSS样式写成JS格式的用法
Arthur0088的专栏
08-29 3529
<br />有些CSS無法通過 W3C 標準,但又非常需要使用的時候,<br />例如透明效果濾鏡有這兩段,<br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);<br />-moz-opacity: 0.4;<br />第一行是 IE 濾鏡,可以使用條件註解的方式<br />第二行 -moz-opacity: 0.4; 是給 Mozilla Firefox 瀏覽器的樣式,<br />就不適合用條件註解,若直接寫在 CSS 中就無法
javascript和css互换
m0_67195464的博客
04-11 994
目录1.回顾样式表1.1 样式表的基本语法1.2 常见样式1.3 样式表类型2.改变图片边框样式3.使用style改变样式表4.页面滚动广告案例 1.回顾样式表 1.1 样式表的基本语法 标签选择器 input{ width:120px; border:solid 1px #ff0000; } ID选择器 #flow{color:#ff0000} 类选择器 .center{ text-align:center; font-weight:bold; } 1.2 常见样式 1.3
【技术】js和css的大小写转化
向着光芒的女孩
05-22 369
1.javascript 转大写： var str="Hello world!"; str=str.toUpperCase(); 转小写： var str="Hello world!"; str=str.toLowerCase(); 2.css 转大写： text-transform:uppercase; 转...
javascript拖拽元素互换位置，实现代码
06-13
上述代码实现了拖拽元素的互换位置，基本思路是通过拖拽事件监听器来获取拖拽元素和目标元素的位置信息，并根据位置信息判断是否需要交换位置。交换位置时，使用一个临时元素来占位，然后将两个元素互换位置即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值