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>

這樣只會覆蓋原來的樣式，不會添加樣式

1. 通過點語法獲取到的style是cssstyleDeclaration對象 var myStyle = oBox.style.cssText;獲得完整的css文本，同於一次修改多條屬性。box.style.cssText = "background-color:green;"
2. 通過style.cssText獲取完整的
3. 文本字符串的拼接

+兩側如果有任意一側不是數值了，那麼就開始字符串的拼接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"注意的是加類名前面要加空格

4. +=

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;";意思是一樣的，不能用+=

5. 只想獲取stle的一個精準屬性

通過style.width等手段獲取具體的樣式值，注意是字符串，如果類似background-color,則去掉連接符後邊的單詞首字母大寫(webkitTransform)console.log(oBox.style.backgroundColor);

6. 設置style的屬性,點語法直接賦值，注意被賦的值是字符串加引號

oBox.style.height = "200px";

7. 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; }裏的外部樣式表，但是可以讀取內部樣式表的內容，修改內部樣式

1. 方法一

<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>

2. 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,]

1. 數組取值
   用在這個地方

<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]);代表取第一個值

2. 數組的賦值 arr[索引] = “新值”

arr[0] = "進"；

3. 數組新增一個值（不用函數實現）arr[索引] = “新值”
   如果只定義arr[8]="iii";那麼中間以，表示
4. 數組空位 例如[,,]長度爲2 空位取值 佔長度
5. 刪除數組的元素
   delete arr[索引]
   留下了數組空位
6. 數組的套嵌

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";