javascript和css互换

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

目录

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 样式表类型


行内样式
内部样式表
外部样式表


2.改变图片边框样式
      

<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>

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>`

4.页面滚动广告案例

咩咩573
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js--javascript和css的互换
long_2004的博客
04-11 918
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
LayoutJs:用 JavaScript 创建布局合理的应用程序
07-03
LayoutJs 使用 JavaScript 创建布局合理的应用程序。 在 CSS 中布置复杂的 UI 可能非常具有挑战性... CSS 主要使用水平和垂直方向区别对待且不能互换的布局模型。 轻松布置现代 Web 应用程序也需要完全控制垂直维度。
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 {
css实现js效果，超详细，非常实用
最新发布
weixin_62981580的博客
09-24 425
CSS和JavaScript是两种不同的前端技术，各有其作用和用途。CSS主要用于样式设计和页面布局，而JavaScript则用于实现页面的交互功能和动态效果。虽然CSS和JavaScript的功能不同，但有时候我们可以通过一些技巧使用CSS来模拟一些JavaScript功能，从而达到简化页面代码和提高加载速度的目的。下面就介绍几种使用CSS实现JS功能的常见技巧。
js-javascript和css的互换
Q_3344的博客
04-11 736
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
js表单文本框内容互换代码.zip
11-24
js表单文本框内容互换代码.zip
ElementQuery:一个用于创建 css 元素查询的小 api。 当媒体还不够时
06-22
在以下示例中，有 4 个主要部分： [{min / max} - {propery} ~= "{value}(unit)" ][ min-width ~= "40em" ] 按照计算顺序，首先有一个属性或查询类型，通常可以与其他数字表示变量（例如宽度、纵横比或面积）互换。...
trivia-game：具有Typescript和GraphQL的琐事游戏
02-22
可与JavaScript互换 为什么选择Next.js？ 渲染图 国际化 增量静态生成 快速刷新 路由 混合SSG（在构建时预渲染页面）和SSR（请求时间） 文件系统路由 API路由 语言支援 TypeScript支持 Sass模块 Next.js分析 文件...
cypress-nhover:将nhover（NativeHover）和nmove（NativeMove）命令添加到Cypress.io测试运行程序
05-13
该软件包的整个测试套件已在realHover上进行了测试，这两个命令完全可以互换（请参阅： ）。 除了一个细节：如果您要悬停的元素不可见， realHover不会向您抛出错误。 柏树 将nhover（NativeHover）和nmove...
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转换和JavaScript
cungui5726的博客
08-16 219
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 ...
html 文本转化为对象,将CSS文本转换为JavaScript对象
weixin_42300175的博客
06-17 482
这是解析器的开始,可以做你想要的.当然它需要工作,特别是如果你想处理可能提供的任何通用CSS.这假设输入css是按照您提供的方式编写的,第一行是属性的名称,最后一行是’}’,依此类推.如果您不想只处理基本属性,编写复杂的解析器并不是一件容易的事.例如,如果您声明如下内容,该怎么办？input[type="text"],table > tr:nth-child(2),#link a:hover...
前端必备————图片转换成css或js方法
热门推荐
java、c++、机器学习方向King
12-26 1万+
https://zhuanlan.zhihu.com/p/24551014?utm_source=tuicool&utm_medium=referral 作者：小爝 链接：https://zhuanlan.zhihu.com/p/24551014 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 今天圣诞节，昨天平安夜，看了大家各种雪花特效，徒手c
Effective前端1：能使用html/css解决的问题就不要使用JS
weixin_33860737的博客
09-17 148
借用Effective之名，开始写Effective系列，总结一些前端的心得。 为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS...
css将字符串转换为html,将CSS文本转换为JavaScript对象
weixin_39990138的博客
06-02 617
这是解析器的开始,可以做你想要的.当然它需要工作,特别是如果你想处理可能提供的任何通用CSS.这假设输入css是按照您提供的方式编写的,第一行是属性的名称,最后一行是’}’,依此类推.如果您不想只处理基本属性,编写复杂的解析器并不是一件容易的事.例如,如果您声明如下内容,该怎么办？input[type="text"],table > tr:nth-child(2),#link a:hover...
css中的变量导出到js中
jiaway的博客
08-11 807
在js 中 import variables
css expression 改成js,expression将JS、Css结合起来_CSS/HTML
weixin_28791139的博客
08-04 141
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员...
JavaScript和css的协作
04-22
JavaScript 和 CSS 在网页开发中有着密切的协作关系。JavaScript 可以通过操作 CSS 样式来改变网页的外观和行为，而 CSS 可以通过设置样式规则来控制 JavaScript 中元素的显示和隐藏，以及动态添加或删除元素等。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值