【js学习笔记-089】-----脚本化CSS

最新推荐文章于 2023-01-10 23:29:58 发布

不一样的水果

最新推荐文章于 2023-01-10 23:29:58 发布

阅读量1.4k

点赞数

分类专栏： JS学习

JS学习专栏收录该内容

148 篇文章 2 订阅

订阅专栏

【js学习笔记-----脚本化CSS】

脚本化CSS启用了一系列有趣的视觉效果，例如：可以创建一个动画让文档内容从右侧“滑入”；也能创建一个轮廓伸缩的列表，创造这些效果的js和css技术以前统称为动态HTML(DHTML)，而现在，这个术语已经不再流行

CSS概览

HTML文档的视觉显示包含很多变量：字体，颜色，间距。CSS标准列举了这些变量，我们称为样式属性。CSS定义了这些属性以指定字体，颜色，外边距，边框，背景，图片，文本对齐方式，元素尺寸和元素位置。为了定义HTML元素的视觉表现，规定了这些CSS属性的值。为此，紧跟着属性名是冒号和值，书写多个属性时，名值对是以分号分隔开。

注释是“/*”开始“*/”结束

层叠

回想一下，在CSS里“C”代表“层叠”。该术语指示了应用于文档中任何给定元素的样式规则是各个“来源”的“层叠”效果：

l web浏览器的默认样式

l 文档的样式表

l 每个独立的html元素的style属性

style属性的样式覆盖样式表中的样式，文档的样式表中的样式覆盖了浏览器的默认样式。任意给定元素的视觉表现可能是来自这3个来源的一个样式组合。一个元素甚至可能匹配样式表中的多个选择器，在这种情况下，所有这些选择器的关联样式属性都将应用到该元素。

为了显示文档元素，web浏览器“必须”组合元素的style属性，包括来自文档样式表中所有匹配的选择器的样式值。计算的结果是一组实际用于显示元素的样式属性和值。这组值就是元素的“计算样式”

复合属性

某些经常在一起使用的样式属性可以组合起来使用一个特殊的复合属性。font-family,font-size,font-weight属性可以用font的复合属性值一次性设置：

font:bold italic 24pt Helvetica;

同样border margin padding属性就是为元素的每条边都设置边框、外边距、内边距

非标准属性

当浏览器厂商实现非标准CSS属性时，它们用将属性名前加一个厂商前缀。

firefox :-moz-

chrome:-webkit-

IE:-ms-

【js学习笔记-----重要的CSS属性】

position	指定元素定位类型
top left	指定元素上、左边缘
bottom right	指定元素下、右边缘
width height	指定元素尺寸
z-index	指定元素相对其他重叠元素的“堆叠次序”，定义了元素定位的第三个维度
display	指定元素是否以及如何显示
visibility	指定元素是否可见
clip	定义元素的“裁剪区域”只显示元素在区域内的部分
overflow	指定元素比分配的空间大时的处理方式
margin border padding	指定元素的空白和边框
background	背景颜色或图片
opacity	指定元素的不透明度，它是CSS3属性，有些浏览器支持,IE另有他法

脚本化内联样式

脚本化CSS最直截了当的方法就是更改单独的文档元素的style属性。类似大多数HTML属性，style也是元素对象的属性，它可以在js中操作。但是style属性不同寻常，它的值不是字符串，而是CSSStyleDeclaration对象。style对象的javascript属性代表了html代码中通过style指定的css属性。如：font-size,font-weight,color

e.style.fontSize=”24px”;

e.style.fontWeight= “bold”;

e.style.color=”blue”;

//带连自符的属性一概使用首字母小写，减号去掉，减号后面的首字母大写。

查询计算出的样式

var title =document.getElementById(“sectiontitle”);

var titleStyle =window.getComputedStyle(element,null);

getComputedStyle()方法的返回值是一个CSSStyleDeclaration对象，它代表了应用在指定元素上的所有样式。表示计算样式的CSSStyleDeclaration对象和表示内联样式的对象之间有一些重要的区别：

Ø 计算样式的属性是只读的

Ø 计算样式的值是绝对值：类似百分比和点之类相对的单位将全部转换为绝对值。

Ø 不计算复合属性，它们只基于最基础的属性。例如不要查询margin属性，应该使用marginLeft和marginTop等

Ø 计算样式的cssText属性未定义

脚本化CSS类

通过内联style属性脚本化CSS样式的一个可选方案是脚本化HTML的class属性值。改变元素的class就改变了应用于元素的一组样式表选择器，它能在同一时刻改变多个css属性。

通过元素的className属性。它保存了一个或多个用空格分隔的css class名称

HTML5给出了更直观的属性classList属性。该属性值是DOMTokenList对象：一个只读的类数组对象，它包含元素的单独类名。但是，和数组元素相比，DOMTokenList定义的方法更加重要。add()和remove()从元素的class属性中添加和清除一个类名。toggle()表示如果不存在类名就添加一个；否则，删除它，contains()方法检测class属性中是否包含一个指定的类名。

DOMtokenList对象，“实时地”代表元素类名集合，而并非是在查询classList属性时类名的一个静态快照。

脚本化样式表

脚本化样式表时，会碰到两类需要使用的对象，第一类，由<style>和<link>元素表示，两种元素包含或引用样式表。如果它们有id属性值，可以用document.getElementById()函数来选择它们。

第二类是CSSStyleSheet对象，它表示样式表本身。document.styleSheets属性是一个只读的类数组对象，它包含CSSStyleSheet对象，表示与文档关联在一起的样式表。如果为定义或引用了样式表的 <style>或<link>元素设置title属性值，该title作为对应CSSStyleSheet对象的title属性就可用。