一，样式表

1.样式表中的三种选择器

ID选择器：# a{}
类选择器：.a{}
标签选择器：input{}

2.样式表中的常见属性

边框属性

边框属性	描述
border-width	设置边框的宽度
border-color	设置边框的颜色
border-style	设置边框的样式

边界属性

边界属性	描述
margin-left	分别设置元素中的左、右、上、下外边距
margin-right
margin-top
margin-bottom

填充属性

填充属性	描述
padding-left	分别设置元素中的左、右、上、下内边距
padding-right
padding-top
padding-bottom

文本属性

文本属性	描述
font-size	字体大小
font-family	字体类型
font-style	字体样式
font-color	字体颜色
text-align	文本对齐
line-height	行高

背景属性

背景属性	描述
background-color	设置背景颜色
background-image	设置背景图像
background-repeat	设置一个图片的平铺方式

2.三种样式表

样式表	语法格式	优点	缺点	使用情况	控制范围
行内	<div style="..."></div>	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签
内部	<style>...</style>	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部	<link rel="stylesheet" href="..." />	完全实现结构和样式分离	需要引入	最多强烈推荐	控制整个站点

二，具体案例

1.鼠标悬停图片放大效果

原理：先排版好图片，再编辑函数设置div的位置的图片路径，当鼠标移入小图片的时候出发鼠标移入事件，更换图片的路径。代码如下：

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>实现鼠标悬停的效果</title><!-- 编辑内部样式，将文本的对齐形式设置为居中对齐 --><style type="text/css">td {text-align: center;}</style><script type="text/javascript">//传入一个标签和图片的路径function over(obj_small, obj_big) {obj_small.style.border = "solid 1px #ff0000"; //设置标签的边框document.getElementById("big").src = "images/" + obj_big; //根据ID拿到元素，再设置图片的路径}//创建设置边框的函数（当鼠标移除的时候就将边框的宽度设置为0）function out(obj_small) {obj_small.style.border = 0;}</script></head><body><!-- 排版 --><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="5"><img src="data:images/show1_big.jpg" id="big" /></td><!-- 设置跨单元格5 --></tr><tr><td style="height:60px;"><img src="data:images/show1.jpg" onmouseover="over(this,'show1_big.jpg')"onmouseout="out(this)" /></td><td><img src="data:images/show2.jpg" onmouseover="over(this,'show2_big.jpg')" onmouseout="out(this)" /></td><td><img src="data:images/show3.jpg" onmouseover="over(this,'show3_big.jpg')" onmouseout="out(this)" /></td><td><img src="data:images/show4.jpg" onmouseover="over(this,'show4_big.jpg')" onmouseout="out(this)" /></td><td><img src="data:images/show5.jpg" onmouseover="over(this,'show5_big.jpg')" onmouseout="out(this)" /></td></tr></table></body>
</html>

2.实现广告悬停的效果

原理：当滑动滚动条的时候，设置广告位置（位置为滚动条滑动的距离+广告的原位置），代码如下：

//实现悬停效果<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实现图片悬停的效果</title><style type="text/css">div {border: 2px solid bisque;position: absolute;right: 20px;top: 20px;/* 设置绝对布局 */}</style></head><body><div id="advertise"><img width="100px" height="100px" src="imgs/1.gif" /></div><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><script type="text/javascript">//创建图片移动的函数window.onscroll = () => {// 设置竖直位置advertise.style.top = document.documentElement.scrollTop + 20 + "px";// 设置水品位置advertise.style.left = document.documentElement.scrollLeft - 20 + "px";}</script></body>
</html>

3.增加边框

原理：给按钮增加点击事件，当被点击的时候就将img的标签样式改变，给大家举例了三种实现方式，代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>//编辑样式，采用类选择器<style>.a{border: 10px solid green;//设置边框box-shadow: 0px 0px 10px yellow;//设置阴影}</style>
</head>
<body>
<img id="img1" src="img/1.gif" alt="">
<img id="img2" src="img/2.gif" alt="">
<img id="img3" src="img/3.gif" alt="">
<p>
//设置点击按钮，增加点击事件<button onclick="fn1()">点我添加边框</button><button onclick="fn2()">点我添加边框</button><button onclick="fn3()">点我添加边框</button>
</p>
<script>
//创建函数function fn1() {//操作css的第一种方式:  直接操作stylem1.style.border="5px solid black"//设置边框m1.style.width="40px"//设置宽度m1.style.opacity=.5//设置透明度}function fn2(){m2.setAttribute("class","a")//使用类选择器}function fn3(){//class是关键字//标签中的class属性在js中都叫做classNamem3.className="a"}
</script>
</body>
</html>

今天的分享到此为止，下期给大家带来更多精彩案例！

JavaScript与CSS的交互（五）相关推荐

JavaScript和css的交互.05
JavaScript和css的交互.05 本期内容操作css更改样式先写三个图片 <img id="m1" src="img/1.gif" alt=& ...
JavaScript6——JavaScript和CSS的交互
9.1 样式表类型 9.1.1 行内样式 9.1.2 内部样式表 9.1.3 外部样式表 <html xmlns="http://www.w3.org/1999/xhtml" ...
javascript与css的交互
目录一.通过js修改元素的样式二.js菜单1.写好样式:2.写好函数:3.不同事件调用不同函数. //window滚动事件window.οnscrοll=mymove; 目标: 1.使用style ...
jQuery基础与JavaScript与CSS交互-第五章
目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器掌握过滤选择器掌握表单选择器 RIA技术常见的RIA技术 - Ajax - Sliverlight ...
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 ...
Javascript教程：AngularJS的五个超酷特性
日期:2012-7-17 来源:GBin1.com AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单 ...

JavaScript与CSS的交互（五）

一，样式表

1.样式表中的三种选择器

2.样式表中的常见属性

边框属性

边界属性

填充属性

文本属性

背景属性

2.三种样式表

二，具体案例

1.鼠标悬停图片放大效果

2.实现广告悬停的效果

3.增加边框

JavaScript与CSS的交互（五）相关推荐

最新文章

热门文章