JavaScript和css的交互

最新推荐文章于 2024-06-16 15:31:20 发布

陈峰806

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量133

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123302732

版权

样式表基本语法

标签选择器

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>

效果图
在这里插入图片描述
好今天就到这了

陈峰806

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和css的交互

样式表基本语法标签选择器input{ width:120px; border:solid 1px #ff0000;}ID选择器#flow{color:#ff0000}类选择器.center{ text-align:center; font-weight:bold;}常见样式样式表类型内部样式表在< head >与< /head >标签之间的style样式<html><head><title&g
复制链接

扫一扫