javascript之屬性操作、innerHTML、判斷、自增、操作多個樣式的方法和不相容的屬性

pleasecallme_522發表於2016-08-03
原文網址 : https://blog.csdn.net/pleasecallme_522/article/details/52107699
JavaScriptHTML

一.javascript的屬性操作。（利用對屬性“讀”和“寫”的操作來完成一些應用）
例1：讀寫輸入結合切換圖片。在輸入框內輸入圖片的間接地址，按確定按鈕後能在頁面中載入出來圖片，並且可以通過改變地址來切換其他圖片。
程式碼如下：

<body>
<input id="input" type="text" value=""/>
<button id="btn">確定</button>
<img src="" id="img"/>
<script>
var oBtn=document.getElementById("btn");
var oInput=document.getElementById("input");
var oImg=document.getElementById("img");
oBtn.onclick=function(){
    oImg.src=oInput.value;
};
</script>
</body>
</html>

結果圖如下：
未輸入圖片地址之前：
這裡寫圖片描述
輸入圖片地址之後：
這裡寫圖片描述

例2：利用字串連結通過input裡輸入一個東西，配合select彈出一個這個東西在哪的效果（如淘寶在杭州）
程式碼如下：

<body>
<input id="input" type="text" value="某寶"/>
<select id="select">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<button id="btn">確定</button>
<script>
var oBtn=document.getElementById("btn");
var oSelect=document.getElementById("select");
var oInput=document.getElementById("input");
oBtn.onclick=function(){
    alert(oInput.value+"在"+oSelect.value);
};
</script>
</body>
</html>

結果圖如下：
未輸入內容之前：
這裡寫圖片描述
輸入內容之後：
這裡寫圖片描述

二.JavaScript的innerHTML
1.作用：讀取頁面當中的所有html內容（內容其實就是html檔案，輸入時還可加入標籤）
2.格式：元素.innerHTML=“新內容”
注：這裡的“=”和所有的屬性賦值一樣，是替換原來的內容。如果想在原來的內容基礎上追加內容，則需要用“+=”
3.例：向一個textarea輸入一個標籤，通過一個按鈕展示出來。（該標籤的樣式提前在css樣式裡已經定義好）
程式碼如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
.box{width:200px; height:200px; background:red;}
</style>
</head>

<body>
<textarea id="textarea"></textarea>
<button id="btn">確定</button>
<div id="div1"></div>
<script>
var oText=document.getElementById("textarea");
var oBtn=document.getElementById("btn");
var oDiv1=document.getElementById("div1");
oBtn.onclick=function(){
    oDiv1.innerHTML=oText.value;
}
</script>
</body>

結果圖如下：
未輸入內容之前：
這裡寫圖片描述
輸入內容之後：
這裡寫圖片描述

三.JavaScript的自增和css寫法
1.格式，如num++或num+=2
2.注意：js裡不能出現“-”，如font-size需寫成fontSize
3.例子：文字點選變大縮小變色（自增改變樣式方法）
程式碼如下：

<body>
<input type="button" value="變小" id="btn1"/>
<input type="button" value="變大" id="btn2"/>
<p id="p1">
今年是新時期人民軍隊改革的開端之年，新體制、新職能、新使命給各戰區和軍種部隊帶來了新的挑戰。習近平總書記在慶祝中國共產黨成立95週年大會上指出：要建設同我國國際地位相稱，同國家安全和發展利益相適應的鞏固國防和強大軍隊，是我國社會主義現代化建設的戰略任務。全軍上下牢記習主席囑託，聚焦實戰把握現代戰爭制勝機理，貼近實戰探索創新戰法訓法，在改革強軍的偉大實踐中，努力鍛造自身打贏的本領。
</p>
<script>
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oP = document.getElementById("p1");
oP.style.fontSize = 14+"px";
var num = 14;
oBtn1.onclick = function(){
    if(num>12){
        num--;
    }else{
        alert("當前已是最小文字");
    }
    oP.style.fontSize = num+"px";
}
oBtn2.onclick = function(){
    if(num<22){
        num++;
    }else{
        alert("當前已是最大文字");
    }
    oP.style.fontSize = num+"px";
}
</script>
</body>

結果圖如下：
初始狀態：
這裡寫圖片描述
當字型變小到設定的最小值12px時：
這裡寫圖片描述
當字型變大到設定的最大值22px時：
這裡寫圖片描述

四.JavaScript操作多個樣式的方法（操作class）
1.首先介紹JS中的識別符號有如下幾種型別：
關鍵字：js裡用到的單詞（如：function var）
保留字：js裡保留的單詞（如：class ）
因此，在JS中，class屬性應該寫成className
2.看如下例子：

<body>
...
<div id="div1" class="box"></div>
...
<script>
var oDiv=document.getElementById("div1");
</script>

a.獲取到上例中oDiv的class值的方法是：oDiv.className
b.可以給元素改變或增添多個class的值：oDiv.className="div1 div2 div3..."
c.刪除元素html中class的值的方法oDiv.className=""，對的，刪除的方法就是先獲取到該元素的值，再給它加上什麼都沒有的值。
3.例子：文字點選變大縮小變色（class方法）
程式碼如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
.font1{font-size:14px; color:black;}
.font2{font-size:16px; color:blue;}
.font3{font-size:12px; color:red;}
</style>
</head>

<body>
<button id="btn1">預設</button>
<button id="btn2">變大</button>
<button id="btn3">變小</button>
<input id="input" value="" placeholder="輸入你想要的字型大小：" />
<button id="btn4">確定</button>
<p id="p1" class="content">
8月2日，最高人民法院公佈《關於審理髮生在我國管轄海域相關案件若干問題的規定》，北京青年報記者瞭解到，上述涉海司法解釋是最高法針對涉海案件制定的第一部綜合性司法解釋，共分兩個部分。
</p>
<script>
    var oBtn1=document.getElementById("btn1");
    var oBtn2=document.getElementById("btn2");
    var oBtn3=document.getElementById("btn3");
    var oP=document.getElementById("p1");
    var oBtn4=document.getElementById("btn4");
    var oInput=document.getElementById("input");
    oBtn1.onclick=function(){
        oP.className="font1";
    }
    oBtn2.onclick=function(){
        oP.className="font2";
    }
    oBtn3.onclick=function(){
        oP.className="font3";
    }
    oBtn4.onclick=function(){
        oP.style.fontSize=oInput.value;
    }
</script>
</body>

五.JavaScript的判斷
1.if(條件){}
滿足條件時。。。
2.if(條件){}else{}
滿足條件時。。。否則。。。
3.if(條件1){}else if(條件2){}……else{}
這裡的舉例見前面“自增改變字型大小”的例子。
4.在JS中，有一些屬性值不能用作判斷條件：
a.js獲取元素的href/src並不是相對路徑，不能用來做判斷（布林值開關解決法）
例如布林值開關解決src不能直接用作判斷的問題：

<body>
<img src="img/1.png" id="img1"/>
<input type="button" id="btn1" value="切換"/>
<script>
var oImg = document.getElementById("img1");
var oBtn = document.getElementById("btn1");
var onOff = true;
oBtn.onclick = function(){
    if(onOff == true){
        oImg.src="img/2.png";
        onOff=false;
    }else{
        oImg.src="img/1.png";
        onOff=true;
}
}
</script>
</body>

b.顏色值也不能用來做判斷（因為有很多顏色值的輸出方式）
c.innerHTML也不能用來做判斷（會有相容性的問題）
d.判斷內容相等時，需要用“==”或“===”(“==”表示比較的兩個屬性值相等 “===”表示比較的兩個屬性不僅值相等而且型別相等)，一個等號時表示賦值

六.JavaScript的不相容的屬性
1.直接通過js改變input的type值（ie6-ie8不相容）
解決方法：可以通過繞過該方法，利用隱藏顯示的方法去做
2.style.float的寫法是錯誤的
style.styleFloat ie寫法
style.cssFloat 其他瀏覽器
解決方法：也可以繞過方法，利用新增class的方法

對於相容性的問題，老師如是說：要麼會解決相容性問題，要麼會避開相容性解決問題。

七.最後，是針對今天所學內容的兩個比較綜合的練習：
1.定義四個按鈕，分別控制四張圖片的切換，點“圖片一”頁面中顯示圖片一；點“圖片二”頁面中顯示圖片二。。。
程式碼如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
.content{width:391px; margin:0 auto;}
.content button{margin-top:5px; background:#FCF;width:50px;margin-left:30px;}
</style>
</head>

<body>
    <div class="content">
        <img src="img/1.png" width="391" height="479" id="img" />
        <button id="btn1">圖片1</button>
        <button id="btn2">圖片2</button>
        <button id="btn3">圖片3</button>
        <button id="btn4">圖片4</button>
    </div>
    <script>
        var oImg=document.getElementById("img");
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oBtn3=document.getElementById("btn3");
        var oBtn4=document.getElementById("btn4");
        oBtn1.onclick=function(){
            oImg.src="img/1.png";
        }
        oBtn2.onclick=function(){
            oImg.src="img/2.png";
        }
        oBtn3.onclick=function(){
            oImg.src="img/3.png";
        }
        oBtn4.onclick=function(){
            oImg.src="img/4.png";
        }
        alert("當前圖片預設為“圖片1”");
    </script>
</body>

結果如圖所示：
初始狀態預設顯示圖片一：
這裡寫圖片描述
點選“圖片二”按鈕切換到圖片二：
這裡寫圖片描述
其他效果類似。。。

2.模擬 qq的對話方塊，在textarea內輸入內容，點選“傳送”之後要求內容以li標籤的形式顯示在之前定義好的ul中，當文字域中無內容時應該出現警告窗；點選“關閉”之後關閉對話方塊。
程式碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<link type="text/css" href="css/common.css" rel="stylesheet" />
<style type="text/css">
.page1{width:254px; margin:0 auto;}
#btn1{width:254px; height:282px;border:none; background:url(img/qq.png); cursor:pointer; margin-top:30px;}
.page1 p{font-weight:bold; padding-left:52px; font-size:18px; margin-top:18px;}
#page2{width:648px;border:1px #c1c7c1 solid; padding:10px 0; position:absolute; top:20px; left:300px; background:#ebf6eb; display:none;}
.name{height:84px; border-bottom:1px #c1c7c1 solid; background:url(img/banner.png) no-repeat;}
#page2 ul{height:289px; border-bottom:1px #c1c7c1 solid; overflow:auto;}
#page2 ul li{ background:url(img/img.png) no-repeat;width:400px; height:26px;; padding-left:40px;margin-top:20px; font-size:14px;}
.message{margin-bottom:10px;}
#text{width:646px; height:104px;border:none; background:#ebf6eb;}
#input1{width:646px; height:111px; background:#ebf6eb; border:none;}
.control{height:30px;position:relative;}
#page2 button{width:68px; height:23px; background:#62ba43; color:#fff; cursor:pointer;}
#btn2{position:absolute; right:70px;}
#btn3{position:absolute; right:0;}
</style>
</head>

<body>
    <div class="page1">
        <button id="btn1"></button>
        <p>點選企鵝開啟聊天室</p>
    </div>
    <div id="page2">
        <div class="name">  
        </div>
        <ul id="dialoge">
        </ul>
        <div class="message">
            <textarea id="text"></textarea>
        </div>
        <div class="control">
            <button id="btn2">關閉</button>
            <button id="btn3">傳送</button>
        </div>
    </div>
    <script>
        var oDiv1=document.getElementById("page2");
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oBtn3=document.getElementById("btn3");
        var oText=document.getElementById("text");
        var oDialoge=document.getElementById("dialoge");
        oBtn1.onclick=function(){
            oDiv1.style.display="block";
            alert("因水平有限，所以請將輸入的內容用li標籤包裹！")
        };
        oBtn2.onclick=function(){
            oDiv1.style.display="none";
        };
        oBtn3.onclick=function(){
            if(oText.value==""){
                alert("請先輸入內容！")
            }
            oDialoge.innerHTML+=oText.value;
        };
    </script>
</body>
</html>

結果圖如下：
開始時：
這裡寫圖片描述
點選企鵝按鈕之後出現對話方塊：
這裡寫圖片描述
在文字域內輸入內容，結果顯示在對話區：
這裡寫圖片描述
當未輸入內容點選傳送時出現提示資訊：
這裡寫圖片描述

我又來了！昨天簡直md智障！還殫精竭慮地在輸入時要用li標籤包裹起來，那把li標籤提前加進程式碼裡不久好了嗎？昨天肯定是瘋了，這個彎都繞不過來。

oDialoge.innerHTML+="<li>"+oText.value+"</li>";

啊啊啊啊啊啊啊啊啊！突破天際的智商！

相關文章