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会将引号当中的内容识别为字符串而不是表达式。
网友评论