2019-01-03

2019-01-03  本文已影响0人  kathyever

ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现

12.2 样式

12.2.1 访问元素的样式

1、DOM样式属性和方法

2、计算的样式

“DOM2级样式”增强了document.defaultView,提供了getComputerStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例“:after”)。如果不需要伪元素信息的话,第二个参数可以是null。

<!DOCTYPE html>
<html>
<head>
    <title>Computed Style Example</title>
    <style type="text/css">
        #myDiv{
            background-color:blue;
            width:100px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id="myDiv" style="background-color:red;border:1px solid black"></div>
</body>
</html>


var myDiv=document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv,null);

alert(computedStyle.backgroundColor);//red
alert(computedStyle.width);//100px
alert(computedStyle.height);//200px
alert(computedStyle.border);//在某些浏览器中是"1px solid black"

无论在哪个浏览器中,最重要的一条是要记住所有计算的样式都是制度的;不能修改计算后样式对象中的 css属性。此外,计算后的样式也包含属于浏览器内部样式表的样式信息,因此任何具有默认值的css属性都会表现在计算后的样式中。换句话说,不能指望某个css属性的默认值在不同浏览器中时相同的。如果你需要元素具有某个特定的默认值,应该手工在样式表中指定该值。

12.2.2 操作样式表

CSSStyleSheet类型表示的是样式表,包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。
CSSStyleSheet对象是一套只读的接口,使用下面的 代码可以确定浏览器是否支持DOM2级样式表:

var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");

CSSStyleSheet继承自StyleSheet,后者可以作为一个基础接口来定义非css样式表。
◆ disabled:表示样式表是否被禁用的布尔值。这个属性是可读/写的,将这个值设置为true可以禁用样式表。
◆ href:如果样式表是通过<link>包含的,则是样式表的URL;否则是NULL
◆ media:当前样式表支持的所有媒体类型的集合。与所有DOM集合一样,这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表,表示样式表适用于所有媒体。在IE中,media是一个反应<link>和<style>元素media特性值的字符串。
◆ ownerNode:指向拥有当前样式表的节点的指针,样式表可能是在HTML中通过<link>或<style/>引入的。如果当前样式是其他样式表通过@important导入的,则这个属性值为null。IE不支持这个属性。
◆ parentStyleSheet:在当前样式表是通过@important导入的情况下,这个属性是一个指向导入它的样式表的指针.
◆ title:ownerNode中的 title属性的值
◆ type:表示样式表类型的字符串。

1、css规则

CSSRule对象表示样式表中的每一条规则。实际上,CSSRule是一个供其他多种类型继承的基类型
CSSStyleRules对象包含下列属性:
◆ cssText:返回整条规则对应的文本
◆ parentRule:如果当前规则是导入的规则,这个属性引用的就是导入规则;否则,这个值为null
◆ selectorText:返回当前规则的选择符文本。
◆ style:一个CSSStyleDeclaration对象,可以通过它设置和取得规则中特定的样式表。
◆ type:表示规则类型的常量值。

其中三个最常用的属性是cssText、selectorText和style。
cssText与style.cssText属性类似,但并不相同。
cssText包含选择符文本和围绕样式信息的花括号,是只读的。
style.cssText只包含样式信息,可以被重写。

大多数情况下,仅使用style属性就可以满足所有操作样式规则的属性了。

2、创建规则

DOM规定,要向现有样式表中添加新规则,需要使用insertRule()方法。这个方法接受两个参数:规则文本和表示在哪里插入规则的索引:

sheet.insertRule("body {background-color:silver}",0);//DOM方法
//这个例子插入的规则会改变元素的背景颜色。
//插入的规则将成为样式表中的第一条规则

IE8及更早版本支持一个类似的方法,名叫addRule(),也接受两必选参数:选择符文本和CSS样式信息;一个可选参数:插入规则的位置。

sheet.addRule("body ","background-color:silver",0);//仅对IE有效

如果要添加的规则非常多,还是建议采用动态加载样式表的技术。

3、删除规则

从样式表中删除规则的方法是deleteRule(),这个方法接受一个参数:要删除的规则的位置。例如要删除样式表中的第一条规则:

sheet.deleteRule(0);//DOM方法

sheet.removeRule(0);//仅对IE有效

与添加规则相似,删除规则也不是实际web开发中常见的做法。考虑到删除规则可能会影响css层叠的效果,因此慎重使用。

——————————————————————————————————————————————————————————————————————

React

React应用的构成模块:元素和组件。掌握了这些,将可以使用简单的可复用代码来创建复杂的应用。

<div id="root">
</div>//div中的所有内容都将由ReactDOM来管理,所以称之为“根”DOM节点

//要将React元素渲染到根DOM节点中
//通过把它们都传递给ReactDOM.render()的方法将其渲染到页面上:
ReactDOM.render(
    <h1>Hello world</h1>
    document.getElementById('root')
);
const element=<h1>Hello world</h1>;

上面的这行代码既不是字符串也不是HTML,它是JSX,一种Javascript的语法扩展。JSX乍看起来可能比较像是模板语言,但事实上它完全是在Javascript内部实现的。它用来声明React当中的元素。

在JSX中使用表达式

可以任意的在JSX中使用Javascript表达式,在JSX当中的表达式要包含在大括号中。

function formatName(user){
    return user.firtsName + '  ' + user.lastName;
}

const user={
      firstName:'Harper',
      lastName:'Perez'      
};

const element=(
      <h1>
              Hello,{formatName(user)}!
      </h1>
);

ReactDOM.render(
      element,
      document,getElementById('root')
)


//在代码中嵌套多个HTML标签时,需要使用一个div元素来包裹
ReactDOM.render(
    <div>
        <h1>Hello,world</h1>
        <h2>Hello,kathy</h2>
        <p>这是美好的一天</p>
    </div>
    ,  
     document.getElementById('example')
)

也可以将React JSX代码放在独立文件上,在HTML文件中引入该文件:

<script type="text/babel" src="helloworld_react.js"></script>

JSX本身其实也是一种表达式,在编译之后会被转化为普通的Javascript对象,这也就意味着可以在if或者for语句里使用JSX,将它赋值给变量,当作参数传入,作为返回值都可以,表达式写在花括号{ }中

function getGreeting(user){
    if(user){
        return<h1>Hello,{formatName(user)}!</h1>;
    }
    return<h1>Hello ,Stranger</h1>
}

在JSX中不能使用if else语句,但是可以使用conditional(三元运算)表达式来替代。
三元运算符是软件编程中的一个固定格式,语法是“条件表达式?表达式1:表达式2”。使用这个算法可以使调用数据时逐级筛选。

ReactDOM.render(
    <div>
        <h1>{i==1?'True':'False'}</h1>
    </div>
    ,
    document,gerElementById('example')
);

JSX属性

可以使用引号来定义以字符串为值的属性:
const element = <div tabIndex="0"></div>
也可以使用大括号来定义以Javascript表达式为值的属性:
const element = <img src = {user.avatarUrl}></img>

切记在使用了大括号包裹的Javascript表达式时就不要再在外面套引号了。JSX会将引号当中的内容识别为字符串而不是表达式。

上一篇下一篇

猜你喜欢

热点阅读