• JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)


    层叠样式 表和动态HTML
     
    层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准。
        使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DHTML)
    CSS样式是一个名称/值的属性列表指定的,属性之间用分号隔开,名字属性和值属性之间用冒号隔开。
     
    1、给文档元素应用样式规则(两种方法)
    a、在HTML标记的style属性中使用它们。如:<p style=margin-left:Lin;margin-right:lin;"/>
    b、使用样式表 stylesheet文件 
    css样式表由样式规则的集合构成。
    每条规则以一个选择器开头,它指定文档元素,其后是用大括号括起来的样式属性和它们值的集合
     
    2、关联样式表和文档
    a、将样式表放置在文档<head>部分中的 <style></style>之间,使它们合并到HTML文档中
    b、将样式表保存在一个样式表文件中,然后在<head></head>部分,使用link 导入CSS文件。
     
    注:可通过 @import "文件名" 将样式导入到<style></style>或者另一个样式表文件当中。
     
    3、层叠
    CSS中的C代表cascading 。这个术语说明应用到文档中指定元素的样式规则来自不同的层叠。
     
    优先规则
     
    用户样式表覆盖默认的浏览器样式表(CSS文件当中定义的),作者样式表覆盖用户样式表(放在<head><style>标记中的样式),
    内联样式覆盖所有样式表(放在HTML标记的style属性当中)。这条通用规则的一个特殊是,值包括!important
    修饰符的用户样式属性覆盖作者样式,在一个样式表中,如果一个元素上应用了多条样式规则,最详细的规则定义
    的样式将覆盖不太详细的规则定义的发冲突的样。
    指定元素id的规则最详细,其次是指定class属性的规则,仅指定一个标记名的规则最不详细,指定多个嵌套标记
    名的规则比指定一个标记名的规则详细。
     
     
     
    4、DHTML的CSS
    4.1 最关键的:定位 position
     
    只有:absoulte fixed relative 才可以用top left等属性定位
     
    static定位的元素不是DHTML元素,不可用top left 定位。这也是元素默认值。
     
    4.2 z-index堆叠只适用于兄弟元素(同一个容器中的同级元素,如果两个不是兄弟的元素重叠,必须设置这两个元素的窗口
    的z-index才有效,当然这两个窗口了得 是兄弟元素。)
     
     4.3  JavaScript中的css属性
     
    脚本化内联样式
    element.Style.css属性名=值     (均为字符串)
     
    一般css属性名 第一个单词小写,以后的每个单词首字母大写,余下小写。
    e.Style.left="30px";
    e.Style.fontFamily="sans-serif";
     
    注:在JavaScript中设置新式属性时,单位是必需的
     
    4.4  DHTML动画
    本质和原理:周期性地改变元素的一个或多个样式属性,使用setInerval()和setTimeout()函数。
    所有的DHTML动画都需要使用这两个函数。
     
    5、脚本化CSS类
    通过改变任意HTML元素的className属性来脚本化HTML class属性的值(动态设置一个样式类名)
     
    className可能包含多个类的字符串,类名之间用空格隔开。设置时,可通过重新设置字符串来控制新的类
    或者类列表。
     
    6、脚本化样式表
    HTML 2级DOM 标准为 <link> <script> 元素都定义了一个disabled属性。
     
    可以在JavaScript设置元素的disabled的值,如果为true,和<link> 和script元素相关的样式就会被关闭,
    且会被浏览器忽略。
     
    样式表对象和样式表规则
    2级DOM 定义了一个完整的API,用来查询,遍历和操作样式表本身。
    应用于一个文档的样式表,存储在文档对象的styleSheets[]数组。 此数组中的每个
    元素都是一个CSSStyleSheet对象。 一个CSSStyleSheet对象有一个包含了样式表规则
    的cssRules[]数组。cssRules[]数组中的每一个对象为CSSRule对象, 代表一条CSS规则。
     有两个属性可以可移植地的使用 selectorText   style
    通过以上的style和selectorText可对样式表中的任意一个样式进行操作,也可添加新样式。
     
    不两只的浏览器可能略有不同
     
    W3C CSSStyleSheet接口定义了 insertRule()方法和deleteRule()方法用来添加和删除规则。
    IE的为
    addRule()和removeRule()函数。
     
  • 相关阅读:
    Django +xadmin+Linux 使用Uwsgi部署xadmin后台系统
    Django+uwsgi+linux 报错: no python application found, check your startup logs for errors ---解决方案
    python程序中执行sql语句报错:columns = [col_desc[0] for col_desc in cursor.description] TypeError: 'NoneType' object is not iterable 解决方案
    配置android studio jdk要用1.8 不然会出现各种报错
    Python请求某一接口,请求头里面已经加了Cookie,但是请求之后参数返回提示:未登录,遇到这种情况解决方案
    Django 执行python3 manage.py makegrations --empty App和python3 manage.py migrate之后,数据库里面没有成功创建表解决方案
    在虚拟机VMware上安装win7时出现operating system not found报错解决方案
    将mp4格式视频转换为m3u8格式报错: Codec 'hevc' (173) is not supported by the bitstream filter 'h264_mp4toannexb'. Supported codecs are: h264 (27) 解决方案
    【.NET】Swagger 允许接口重名
    (C#) HTTP Authentication (Basic, NTLM, Digest, Negotiate/Kerberos)
  • 原文地址:https://www.cnblogs.com/tlxxm/p/4374534.html
Copyright © 2020-2023  润新知