javascript第三天---标签内的属性和数组

操作标签内的样式

<div id="box" style="width:100px;height: 100px;background: red;"></div>
 <script type="text/javascript">
    var oBox = document.getElementById('box');
    oBox.style ="border:10px solid yellow;"
</script>

这样只会覆盖原来的样式，不会添加样式

通过点语法获取到的style是cssstyleDeclaration对象 var myStyle = oBox.style.cssText;获得完整的css文本，同于一次修改多条属性。box.style.cssText = "background-color:green;"
通过style.cssText获取完整的
文本字符串的拼接

+两侧如果有任意一侧不是数值了，那么就开始字符串的拼接console.log("我"+"你");结果是我你

oBox.style.cssText = oBox.style.cssText + "border:10px solid yellow;"; 但是在ie浏览器里面，显示的样式表最后没有分号，height:100px;background:red所以拼接的话就变成了height:100px;background:redborder:10px solid yellow; 所以可以变为oBox.style.cssText = "border:10px solid yellow;"+oBox.style.cssText;但是操作整个css样式，一个会有兼容问题，一个是会覆盖。所以不用这种方法 可以用来给标签添加类名 box.className += " btn"注意的是加类名前面要加空格

var a =1;
a =a+1;
a += 1;

box.num = box.num +1;
box.num+=1;
box.num++;//只能每次递增一时使用

代表的意思是一样的，所以oBox.style.cssText += "border:10px solid yellow;"与oBox.style.cssText = oBox.style.cssText + "border:10px solid yellow;";意思是一样的，不能用+=

只想获取stle的一个精准属性

通过style.width等手段获取具体的样式值，注意是字符串，如果类似background-color,则去掉连接符后边的单词首字母大写(webkitTransform)console.log(oBox.style.backgroundColor);

设置style的属性,点语法直接赋值，注意被赋的值是字符串加引号

oBox.style.height = "200px";

float 在低版本ie678下使用styleFloat 在高版本ie和其他浏览器oBox.style.styleFloat = "right"; 使用cssFloat;oBox.style.cssFloat = "right"; 最好使用类名使用<style>里写

操作内部样式表

需要注意的是，通过console.log(oBox.style.cssText);是获取不到#box{ width: 100px; height: 100px; background-color: red; }里的外部样式表，但是可以读取内部样式表的内容，修改内部样式

方法一

<style type="text/css" id="myStyle">

var myStyle = document.getElementById('myStyle'); console.log(myStyle);是可以获取里面的样式的,通过inner.HTML表示获取元素内部的html,会无情的覆盖原有的元素，可以输出html

赋值元素内部的html ele.innerHTML = “<h3>123</h3>”； myStyle.innerHTML = myStyle.innerHTML + "#box{width:300px;}";

但是不要这样操作

oBox.onclick = function () { oBox.innerHTML = oBox.innerHTML + "<h3>567</h3>"; } 可以通过不断的点击获得大量的<h3></h3>

innerText 表示获取元素内部的文本

赋值元素内部的html ele.innerText = “今天”；会无情的覆盖原有的元素，不会输出我们的html

<div id="box">
        <h3>123</h3>
</div>
<script type="text/javascript">
    oBox.innerText = "今天天气很好"；
</script>

结果是没有了<h3>

对象的自定义属性

<script>
    var obj = {};
    console.log(obj);
    obj.name =  "lisi";
    console.log(obj);
</script>

通过点语法属性给空对象加了自定义属性

自定义属性不能直接通过点操作要修改通过setAttribute来操作

setAttribute("属性名"，“值”) box.setAttribute("fy","风雨")

数组

可以存储任意的数据类型数组长度arr.length length是数组的一个属性比如

<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<script>
var box = document.getElementsByClassName("box");
</script>

console.log(box.length)结果是4长度个数最后一个数据的末尾的逗号可加可不加[1,2,3] [1,2,3,]

数组取值
用在这个地方

<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<script>
var box = document.getElementsByClassName("box");
</script>

此时box是个集合，而操作style必须是一个具体的元素，这时可以用box.0 但是后面是数字不能用点，在js里代表的是1.3，所以可以用 box[0]代表第一个box 数组的长度-1是序号的最大值

var  arr = [
        123,
        {},
        [],
        function () {
        }
    ];
    console.log(arr);

结果是从0开始排序。序号是索引，索引是数值型。取值使用arr[索引号] console.log(arr[0]);代表取第一个值

数组的赋值 arr[索引] = “新值”

arr[0] = "进"；

数组新增一个值（不用函数实现）arr[索引] = “新值”
如果只定义arr[8]="iii";那么中间以，表示
数组空位例如[,,]长度为2 空位取值占长度
删除数组的元素
delete arr[索引]
留下了数组空位
数组的套嵌

var  arr = [
        123,
        {},
        [1,2,3,[4,5,6]],
        function () {
        }
    ];
    console.log(arr[2][3][1]);

结果是数字5

[]的语法

<div id="box" style="width: 50px;">
        <h3>123</h3>
</div>
<script type="text/javascript">
    var oBox = document.getElementById('box');
    // var myText = oBox.innerHTML;
    var myText = oBox["innerHTML"];
    console.log(myText);
</script>

obj["字符串"]可以代替obj.字符串,里面的字符串可以驼峰可以不驼峰

var a = "name";
    obj.name = "lisi";
    // console.log(obj.a);undefined
    console.log(obj[a]);
    
    box.style.width = "200px";
    box["style"]["width"] = "200px";