[深圳|荣耀师兄]JS-王熠华|2019年07月27日的日报-技能树.IT修真院

发表于： 2019-07-27 21:53:13

1 951

今天完成了什么：

弄小课堂；听老大开计算机原理会以及写任务；

遇到了什么问题：

暂无

收获了什么：

利用JavaScript可以修改HTML标签所设置的CSS属性，这样就可以改变标签的样式。

用JavaScript修改标签的样式主要有两种做法：一是用另一个CSS样式表代替标签现在CSS样式表，二是直接修改标签的CSS样式表中的属性。

用JS修改标签的 class 属性值：

class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。

更改一个标签的 class 属性的代码是：

document.getElementById( id ).className = 字符串;

document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法获取。className 是 DOM 对象的一个属性，它对应于标签的class 属性。字符串是 class 属性的新值，它应该是一个已定义的CSS选择符。

利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。

举例：

<style>
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div>欢迎光临！</div>
<p><button>更改样式</button></p>
<script>
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>

本例中，按钮用来调用JS函数，在JS函数中，为 <div> 标签设置了class 属性值，把 .txt 样式应用在该标签上。

用JS修改标签的 style 属性值：

style 属性也是在标签上引用样式表的方法之一，它的值是一个CSS样式表。DOM 对象也有 style 属性，不过这个属性本身也是一个对象，Style 对象的属性和 CSS 属性是一一对应的，当改变了 Style 对象的属性时，对应标签的CSS 属性值也就改变了，所以这属于第二种修改方法。

更改一个标签的 CSS 属性的代码是：

document.getElementById( id ).style.属性名 = 值;

document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法获取。style 是 DOM 对象的一个属性，它本身也是一个对象。属性名是 Style 对象的属性名，它和某个CSS属性是相对应的。

说明：这种方法修改的单一的一个CSS属性，它不影响标签上其它CSS属性值。

注意：多数 Style 对象的属性名和 CSS 属性名是不同名的，且 Style 对象的属性名要区分大小写。

比如：CSS的 font-size 属性对应于 Style 对象的 fontSize 属性，CSS的margin-top 属性对应于 Style 对象的 marginTop 属性。

举例：

<div>欢迎光临！</div>
<p><button>大小</button>
<button>颜色</button>
<button>背景</button>
<button>边框</button>
</p>
<script>
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>

可以看到，虽然一些 Style 对象的属性和 CSS 属性不同名，但取值方法是完全一样的，所以我们可以用这种方法修改一个标签的 CSS 属性值。

Style对象是一个 DOM 对象的子对象，它的每个属性都和CSS的属性相对应。

Style对象的引用方法是：

DOM对象.style.Style属性名

Style 对象的属性和 CSS 属性的区别是：

Style 属性要区分大小写，CSS 属性不区分大小写。

由单个单词命名的 Style 属性和 CSS 属性同名。如：color、border、margin、width、height 等。只有一个特例，CSS 的float 属性对应的 Style 属性是 styleFloat 或 cssFloat。

由多个单词组成的 Style 属性命名方法是：第一个单词小写，其后的单词首字母大写。而 CSS 属性是单词间用“-”分隔。如：font-family 对应于fontFamily，background-image 对应于 backgroundImage，border-top-width 对应于 borderTopWidth。

用JS程序修改页面的风格：

document.body.style.Style属性名 = 值;

document.body 对应的是文档的 <body> 标签，它的风格影响的是整个网页的风格。

如：

<script>
document.body.fontFamily = "宋体";
document.body.fontSize = "16px";
document.body.backgroundImage = "url(./image/bg.gif)";
</script>

用JS程序修改标签的风格：

document.getElementById( id ).style.Style属性名 = 值;

document.getElementById( id ) 用于获取拥有指定 id 的标签，它的风格只影响这一个标签的风格。

如：

<script>
document.getElementById( "mark" ).width = "40%";
document.getElementById( "mark" ).textAlign = "center";
</script>

Math.random():获取0~1随机数

Math.floor() method rounds a number DOWNWARDS to the nearest integer, and returns the result. (小于等于 x，且与 x 最接近的整数。)
其实返回值就是该数的整数位：
Math.floor(0.666)   --> 0
Math.floor(39.2783)   --> 39

所以我们可以使用Math.floor(Math.random())去获取你想要的一个范围内的整数。
如：现在要从1~52内取一个随机数：
首先Math.random()*52 //这样我们就能得到一个 >=0 且 <52的数
然后加1：Math.random()*52 + 1    //现在这个数就 >=1 且 <53
再使用Math.floor取整

最终: Math.floor(Math.random()*52 + 1)

这就能得到一个取值范围为1~52的随机整数了.

-----------------------------------------------------------------------------------------------------------------------------------------

Math.(random/round/cell/floor)随机数的用法

Math.random() 返回值是一个大于等于0，且小于1的随机数

Math.random()*N 返回值是一个大于等于0，且小于N的随机数

Math.round()         四舍五入的取整
Math.ceil()            向上取整，如Math.cell(0.3)=1 、又如Math.ceil(Math.random()*10) 返回1~10
Math.floor()           向下取整，如Math.floor(0.3)=0、又如Math.floor(Math.random()*10)返回0~9

引申：
Math.round(Math.random()*15)+5; 返回5~20随机数

Math.round(Math.random()*(y-x))+x; 返回x~y的随机数，包换负数。

明天计划：

继续任务和小课堂；