JavaScript6——JavaScript和CSS的交互
2024-04-22 15:29:19
9.1 样式表类型
9.1.1 行内样式
9.1.2 内部样式表
9.1.3 外部样式表
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<img src="data:images/video.jpg" class="video"/>商品名称：液晶电视<br />
商品编号：105428<br />
价格：7845元
</body>
</html>class="video"在style.css里面。
9.2 JavaScript访问样式的常用方法
如何动态改变页面元素的样式？
使用
getElement系列方法访问元素改变样式属性：
Style属性className属性
9.2.1 Style属性
9.2.2 使用style属性制作菜单
法一：（使用style改变样式）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
li{font-size: 12px;color: #ffffff;background-image: url(images/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>法二：（使用style改变样式）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
li{font-size: 12px;color: #ffffff;background-image: url(images/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>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
<script type="text/javascript">
var len=document.getElementsByTagName("li");
for(var i=0;i<len.length;i++){len[i].onmouseover=function(){this.style.backgroundImage="url(images/bg2.gif)";}len[i].onmouseout=function(){this.style.backgroundImage="url(images/bg1.gif)";} }</script>
</body>
</html>法三：（使用className改变样式）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用className改变样式</title>
<style type="text/css">
li{font-size: 12px;color: #ffffff;background-image: url(images/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(images/bg1.gif);}
.over{background-image: url(images/bg2.gif);color:#ffff00;font-weight:bold;cursor:hand;}
</style>
</head><body>
<ul>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">资讯动态</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">产品世界</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">市场营销</li>
</ul></body>
</html>法四：（使用className改变样式）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用className改变样式</title>
<style type="text/css">
li{font-size: 12px;color: #ffffff;background-image: url(images/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(images/bg1.gif);}
.over{background-image: url(images/bg2.gif);color:#ffff00;font-weight:bold;cursor:hand;}
</style>
</head><body>
<ul>
<li>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
<script type="text/javascript">
var len=document.getElementsByTagName("li");
for(var i=0;i<len.length;i++){len[i].onmouseover=function(){this.className="over";}len[i].onmouseout=function(){this.className="out";} }
</script>
</body>
</html>
9.2.3 随鼠标滚动的广告图片
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>随鼠标滚动的广告图片</title><style type="text/css">#main{text-align:center;}#adver{position:absolute;left:50px;top:30pxz-index:2;}</style><script type="text/javascript">var adverTop;//层距页面顶端距离var adverLeft;var adverObject;//层对象function inix(){adverObject=document.getElementById("adver");//获得层对象if(adverObject.currentStyle){adverTop=parseInt(adverObject.currenrStyle.top);adverLeft=parset(adverObject.currentStyle.left);}else{adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);}}function move(){adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";} window.onload=inix;window.onscroll=move;</script>
</head>
<body>
<div id="adver"><img src="data:images/adv.jpg"/></div>
<div id="main"><img src="data:images/main1.jpg"/><img src="data:images/main2.jpg"/><img src="data:images/main3.jpg"/></div>
</body>
9.2.4 改变图片样式
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>改变图片边框样式</title>
<style type="text/css">
.out{border:solid 1px #eeeeee;}
.over{border:solid 2px #F60;}
</style>
</head><body><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="data:images/new_01.jpg" class="out" onmousemove="this.className='over'" onmouseout="this.className='out'" /></td><td><img src="data:images/new_02.jpg" class="out" onmousemove="this.className='over'" onmouseout="this.className='out'"/></td><td><img src="data:images/new_03.jpg" class="out" onmousemove="this.className='over'" onmouseout="this.className='out'"/></td></tr>
</table></body>
9.2.5 获取样式的属性值
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素位置</title>
<style type="text/css">
body{margin-top: 10px;margin-right: auto;margin-bottom: 0px;margin-left: 200px;
}
#test{position:absolute;width:200px;left:50px;top:120px;height:100px;background-color:#F93;}
</style><script type="text/javascript">
function place(){var divObj=document.getElementById("test");alert("上："+divObj.currentStyle.top+"\n左 ："+divObj.currentStyle.left);//divTop=document.defaultView.getComputedStyle(divObj,null).top;//divLeft=document.defaultView.getComputedStyle(divObj,null).left;//alert("上："+divTop+"\n左 ："+divLeft);}
</script>
</head><body>
<div id="test" onclick="place()">测试</div>
</body>JavaScript6——JavaScript和CSS的交互相关推荐
- JavaScript和css的交互.05
JavaScript和css的交互.05 本期内容 操作css更改样式 先写三个图片 <img id="m1" src="img/1.gif" alt=& ...
- JavaScript与CSS的交互（五）
目录 一,样式表 1.样式表中的三种选择器 2.样式表中的常见属性 边框属性 边界属性 填充属性 文本属性 背景属性 2.三种样式表 二,具体案例 1.鼠标悬停图片放大效果 2.实现广告悬停的效果 3 ...
- javascript与css的交互
目录 一.通过js修改元素的样式 二.js菜单1.写好样式:2.写好函数:3.不同事件调用不同函数. //window滚动事件window.οnscrοll=mymove; 目标: 1.使用style ...
- java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法 随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
- 5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端 技术,它们需要相互密切的合作.我们的网页中都有.js文件和.cs ...
- 5种JavaScript和CSS交互的方法
英文 | https://davidwalsh.name/ways-css-javascript-interact 译文 | https://www.webhek.com/post/ways-css- ...
- 响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互 补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
- jQuery基础与JavaScript与CSS交互-第五章
目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 - Ajax - Sliverlight ...
- 9 个基于JavaScript 和 CSS 的 Web 图表框架
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图, ...
最新文章
- 查看linux是多少位的
- 深度学习(DL)与卷积神经网络(CNN)学习笔记随笔-02-基于Python的卷积运算
- 最新临床肿瘤学文献精选（2021.12.5-2021.12.11）
- 我们无法在你选择的位置安装Windows。0x80300002
- Opengl ：公转与自转
- 还在用Excel做数据分析？两大方法5分钟完成别人一天的工作
- python含多个附件的邮件_Python发送带有多个图像附件的电子邮件
- JavaScript的封装
- 147.对链表进行插入排序
- 关闭Win10系统天气图标
- 【kaggle】Airbnb新用户的民宿预定结果预测
- CSCD（2015-2016年）来源期刊目录中国科学引文数据库
- 解析mindjump如何在线生成微信自动跳转第三方浏览器源码
- Msg 15138 The database principal owns a schema in the database, and cannot be dropped.
- python量化策略——大类资产配置模型（最小方差模型）
- 用Bing API接口实现同IP域名查询（Python版）
- 如何利用朋友圈做好微信营销之路
- 自我鉴定300字大专计算机应用,业余大专自我鉴定300字（精选8篇）
- matlab按图像边缘抠图_不会抠图？保姆级抠图教程！手把手教你抠图（一）
- 完美型性格的优势和不足，完美型人格的职业发展