JS--javascript和css的互换

最新推荐文章于 2022-06-10 21:09:47 发布
最新推荐文章于 2022-06-10 21:09:47 发布
阅读量83 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68876413/article/details/124109264
版权

1.JavaScript中常用的事件列表

onclick(当用户单击某个对象时调用事件)
onmouseover(鼠标移到某元素之上)
onmouseout(鼠标从某元素移开)
onmousedown(鼠标按钮被按下)

2.跟换菜单背景案例

<style type="text/css">
		.sa{
			background-image: url(img/bg2.gif);
		}
		.sb{
		}
		li{
			float: left;
			background-image: url(img/bg1.gif);
			width: 103px;
			height: 33px;
			text-align: center;
			line-height: 33px;
			margin-left: 3px;
			list-style: none;
		}
		</style>
	</head>
	<body>
		<ol>
			<li onmousemove="this.className='sa'" onmouseleave="this.className='sb'" >1234</li>
			<li onmousemove="this.className='sa'" onmouseleave="this.className='sb'">2234</li>
			<li onmousemove="this.className='sa'" onmouseleave="this.className='sb'">3234</li>
		</ol>
	</body>

3.广告随鼠

<body>
		<div style="position: fixed;">
			<img src="img/adv.gif" />
		</div>
		<div>
			<img src="img/1.1.png"/>
			<img src="img/1.2.png"/>
			<img src="img/1.3.png"/>
			<img src="img/1.4.png"/>
			<img src="img/1.5.png"/>
		</div>
	</body>

标滚动案例

唐胤槐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js--javascript和css的互换
long_2004的博客
04-11 924
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
javascript经典特效---互换导航条.rar
01-07
【标题】"javascript经典特效---互换导航条"主要涉及的是使用JavaScript实现网页导航条的交互效果。...通过分析提供的"互换导航条.htm"文件，我们可以深入学习如何结合HTML、CSS和JavaScript实现这种效果。
[转]动态加载、移除、替换JS和CSS
weixin_33696106的博客
02-04 131
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt; &lt;HEAD&gt;  &lt;TITLE&gt; New Document &lt;/TITLE&gt;  &lt;META NAME="Generator" CONTENT="EditPlus"
用JS来切换CSS，很好很简单
chaoloveyou的专栏
05-05 8354
假如我们想通过前台自主选择CSS样式来达到改变颜色、风格等目的的话，用JS调用CSS文件就OK。先做两个（或多个）CSS文件。style_1.css　代码：body{background-color: #ccff66;}...... style_2.css　代码：body{background-color: #ff0000;}......JS代码如下：fun
js更改css
qq_36971710的博客
11-09 171
设置cssText element.style.cssText = ‘height: 100px !important’; element.style.cssText += ‘height: 100px !important’; 改变class 比如JQ的更改class相关方法 因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式 element....
js-javascript和css的互换
Q_3344的博客
04-11 743
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
javascript之鼠标拖动位置互换效果代码
10-30
在本文中，我们将探讨javascript之鼠标拖动位置互换效果代码的实现方法，包括HTML、CSS和JavaScript三方面的内容。 一、HTML结构 在HTML结构中，我们使用div元素来创建容器和项元素，用于存放要交换位置的元素。...
24-分层和合成机制：为什么CSS动画比JavaScript高效？_For_vip_user_0011
08-04
CSS动画与JavaScript的渲染机制之分层和合成机制 CSS动画与JavaScript都是我们常用的两种技术来实现动画效果，但是它们在渲染机制上有着很大的区别。今天我们来探讨CSS动画为什么比JavaScript高效。 首先，让我们...
js表单文本框内容互换代码.zip
最新发布
11-24
总的来说，"js表单文本框内容互换代码"是一个关于前端开发的实践案例，它涉及了HTML5表单、CSS样式以及JavaScript和jQuery的交互操作。这个例子对于学习前端开发，尤其是对表单交互有需求的开发者来说，是一个很好的...
javascript经典特效---XML超酷页面效果二.rar
01-04
4. **JSON/XML互换**：虽然JSON（JavaScript Object Notation）在现代Web开发中更为流行，但XML和JSON之间的转换也很常见。JavaScript可以方便地将XML转换为JSON对象，反之亦然。 在“XML超酷页面效果二”中，可能...
html页面动态加载，删除，替换 js/css引用
07-10
html页面动态加载，删除，替换 js/css引用
JS实现的样式切换功能tableCSS实例
11-29
本文实例分析了JS实现的样式切换功能tableCSS。分享给大家供大家参考，具体如下： 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;} //参数及默认参数 var options = { ta
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
cssinjspackage用于将CSS转换为JS样式的Atom插件反过来也可以
08-10
css-in-js package 用于将CSS转换为JS样式的Atom插件，反过来也可以
使用 JavaScript 更改 CSS 示例
allway2的博客
06-10 4489
JavaScript 都是关于动态的东西，处理动态 CSS 更改只是 JavaScript 正是我们需要的场景之一。使用 JavaScript，我们可以为 DOM 中的一个或多个元素设置 CSS 样式，修改它们，删除它们，甚至更改所有页面的整个样式表。让我们来看看我们可以做到这一点的不同方法：直接从 JavaScript 设置单个样式是处理动态 CSS 样式时最常见的场景之一。这种方式允许您更改 DOM 中存在的一个或多个元素的 CSS 样式。你所要做的就是： 如果您像这样执行此代码，您会注意到更改
CSS转换和JavaScript
cungui5726的博客
08-16 222
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 ...
JS-javascript和css的互换
m0_67140851的博客
04-11 682
JS-javascript和css的互换1.JavaScript中常用的事件列表2.跟换菜单背景案例2.1案例效果图3.广告随鼠标滚动案例3.1案例效果图 1.JavaScript中常用的事件列表 1. onclick(当用户单击某个对象时调用事件) 2. onmouseover(鼠标移到某元素之上) 3. onmouseout(鼠标从某元素移开) 4. onmousedown(鼠标按钮被按下) 2.跟换菜单背景案例 <!DOCTYPE html> <html> <head&
静态补充CSS类型转换与JS深拷贝与浅拷贝
lwaner的博客
10-21 146
静态补充CSS类型转换 常用的块级元素 常用的块级block标签： <hn>...</hn> 标题标签 <hr> 水平分割线 <p>...</p> 段落 <ul>...</ul> 无序列表 <ol>...</ol> 有序列表 <dl>...</dl> 定义列...
css中的单位换算_CSS单位中px、em和rem的区别&js实现rem单位换算
weixin_30413679的博客
01-17 367
CSS单位中绝对长度与相对长度px介绍与优缺点em介绍与优缺点rem介绍与优缺点总结CSS单位中绝对长度与相对长度css单位中分为相对长度单位、绝对长度单位。绝对长度：cm、mm、in、px、pt、pc相对长度：em、ex、ch、rem、vw、vh、vmin、vmax、%浏览器对各单位的支持情况：平时我们常用的单位主要是rem、em和px，为了便于区分它们的使用场景，我们在此进行详细的讲解。px介...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值