样式表基本语法
标签选择器
input{
width:120px;
border:solid 1px #ff0000;
}
ID选择器
#flow{color:#ff0000}
类选择器
.center{
text-align:center;
font-weight:bold;
}
常见样式
样式表类型
内部样式表
在< head >与< /head >标签之间的style样式
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
}
.video{
margin: 3px;
float: left;
}
</style>
</head>
获取行内样式的方法
document.getElementById(elementId).样式属性值
var divObj=document.getElementById("test");
var objTop=divObj.style.top;
获取类样式的方法
currentStyle
getComputedStyle()
var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,null).top;
外部样式表
使用< link >标签链接到外部样式文件
使用@import方法导入外部样式表
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
……
</body>
</html>
Style属性
HTML元素.style.样式属性="值"
style是HTML的CSS标签可在内设置元素的样式
style对象的常用属性
JavaScript中常用的事件列表
CSSStyleSheet对象
通过 document.styleSheets 访问到CSSStyleSheet的集合。其中每一个元素是一个CSSStyleSheet,就是从样式文件引入或用定义的一个样式列表。
属性disabled : true or false ,该样式是否可用。
属性cssRules : 所有样式的列表,在ie中要用rules
useage : document.styleSheets[0].cssRules[0].selectorText
CSSStyleRule对象
上面的cssRules 取到的就是CSSStyleRule对象的集合,每一个CSSStyleRule对象就是一条css样式。
cssText属性:以字符串形式表示了当前状态的全部规则(ie不支持)。
useage : document.styleSheets[0].cssRules[0].cssText
selectorText 属性: 规则的选择符。(.className)
style属性 : 与HTMLElement.style取得的对象类似,取得了一个CSSStyleDeclaration对象的引用。
CSSStyleDeclaration对象
上面style属性取到的就是一个CSSStyleDeclaration对象,包含了一条样式的所有样式属性。
cssText属性:以字符串形式表示了当前状态的全部规则(ie可以支持这个)。
useage : document.styleSheets[0].cssRules[0].style.cssText
在网页中制作随鼠标滚动的广告图片
可用以下属性
制作随鼠标滚动的广告图片实现思路
1.图片放在一个层中,使用CSS样式设置层的初始位置
2.页面加载时,获取图片所在层的具体位置,即页面的left和top位置
3.获取页面初始位置时,要判断当前浏览器的类型,本例只判断是IE还是fireFox
4.当滚动条滚动时,获取滚动条距离页面顶端和左侧的距离,同时改变层距离顶端和左侧的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px solid black;
/*绝对布局的特点:可以随便调整位置*/
position: absolute;
/*top bottom left right*/
right: 20px;
top: 40px;
transition: .1s;
}
</style>
</head>
<body>
<div id="ad">
<button onclick="ad.style.display='none'">x</button>
<br>
<img src="img/4.gif" alt="">
</div>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<p>淘宝,逃匿所爱</p>
<script>
//窗口的滑动事件
window.onscroll=()=> {
//获取到窗口滚动的距离 scrollTop
ad.style.top=40+document.documentElement.scrollTop+"px"
}
</script>
</body>
</html>
效果图
好今天就到这了