js day01 變數, 引入, 屬性操作, 樣式操作

非原有屬性：是我們通過外部的方式給重新起名，并且重新賦值

<div abvc="123"></div>

• 使用點.的方式操作屬性 只能拿原有屬性
  • 獲取屬性 元素.屬性名
  • 設定屬性 元素.屬性名 = ‘新的屬性值’

// 獲取屬性
// 元素.屬性名  
var box = document.getElementById('box');
alert(box.id);
alert(box.class); // undefined  
alert(box.title);

// 設定屬性
// 元素.屬性名='新屬性值'
box.id = 'box1';
alert(box.id);

注意：class是一個保留字，和其他的屬性操作方式不一樣，必須使用className

// // 獲取元素
// var box = document.getElementById('box');
// 獲取屬性
// alert(box.className);

// 需求：點擊按鈕，給div元素添加類名'active'

// 1、誰發生事件  button  獲取這個按鈕  
// 2、發生什么事件  onclick  點擊事件  
// 3、干什么事  把active這個類，添加給div這個元素 

var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function(){
    // 設定類名
    // box.className = 'active';
    box.className = '';

}

使用中括號的方式操作屬性

// 獲取元素
var aDiv = document.getElementById('box');

// 把屬性名賦值給一個變數  就不可以使用點的方式了，需要使用中括號[]
var d = 'id';
// alert(aDiv[d]);
alert(aDiv['id']);  // return回傳值的時候，會用到這個

樣式 通過js操作的樣式,全部屬于行內樣式

操作樣式

元素.className

 box.className = 'active';

元素.style.樣式名 = ‘樣式值’

aDiv.style.width = '100px';
aDiv.style.height = '100px';
aDiv.style.background = 'blue';

// 注意：在js中，不承認 - ; 把橫線洗掉掉，第二個單詞開始，首字母大寫
aDiv.style.backgroundColor = 'blue';

cssText

語法:元素.style.cssText = '樣式名：樣式值；..............'

覆寫的問題，當使用多個的時候，后面的會覆寫前面的

// 語法:元素.style.cssText = '樣式名：樣式值；..............'
// 獲取元素
var aDiv = document.getElementById('box');

aDiv.style.cssText = 'width: 100px; height: 100px; border:2px solid blue';

// 解決方式：使用原來的樣式 + 新的樣式
aDiv.style.cssText = aDiv.style.cssText + 'background:red';

// 不兼容ie 6 7 8
aDiv.style.cssText +='background:red'; 

// 解決兼容:在樣式的前面，引號的里面加 分號 ;
aDiv.style.cssText +=';background:red'; 

測驗陳述句

alert()他是js自帶的彈窗，帶有一個確定按鈕，具有阻塞（如果我不點擊確定，后面的代碼不會執行）作用,只是用來測驗使用 不能用于實際開發

alert(1,2)
    // 在控制臺列印，可以一次性列印多個
    console.log('我是在控制臺列印的測驗陳述句',1);

    // 對話框
    // 有一個輸入內容的input框，有一個確定和取消按鈕
    var a =  prompt('請輸入內容');
    console.log(a)

獲取標簽內容

單標簽是沒有內容，input標簽除外 雙標簽也是有內容的

單標簽input

獲取內容：元素.value

設定內容：元素.valuehttps://www.cnblogs.com/bnzw/p/= 'https://www.cnblogs.com/bnzw/p/新內容'

// 獲取元素
var pt = document.getElementById('pt');
// 獲取內容  元素.value
console.log(pt.value);
// 設定內容   元素.valuehttps://www.cnblogs.com/bnzw/p/= 'https://www.cnblogs.com/bnzw/p/新內容'
pt.valuehttps://www.cnblogs.com/bnzw/p/= 'https://www.cnblogs.com/bnzw/p/我是改變后的內容';

雙標簽內容

獲取內容:元素.innerHTML / 元素.innerText

設定內容:元素.innerHTML = ‘新內容' / 元素.innerText = ‘新內容'

// 獲取元素
var box = document.getElementById('box');

// 獲取內容  元素.innerHTML / 元素.inerText 
console.log(box.innerHTML);
console.log(box.innerText)

// 設定內容 元素.innerHTML = '新內容'/ 元素.inerText  = '新內容'

box.innerHTML = '我是改變后的新內容1233'
box.innerText= '我是改變后的新內容1233888888'

區別：

? innerHTML可以識別標簽

? innerText 不可以識別標簽

box.innerHTML = '<h2>我是改變后的新內容1233</h2>'
box.innerText= '<h2>我是改變后的新內容1233</h2>'

案例- 留言板

<div id="box"></div>
<input type="text" name="" id="pt"><button id="btn">按鈕</button>
<script>
// 需求：在輸入框內輸入內容，點擊按鈕，把內容發送到上面的內容區域

// 1、是發生事件  button  獲取這個元素 
// 2、發生什么事件   onclick 單擊事件  
// 3、干什么事  
//     1、獲取input的內容  元素.value
//     2、給div設定內容  元素.innerHTML = '新內容'（元素.value）

// 獲取元素  
var btn = document.getElementById('btn');
var pt = document.getElementById('pt');
var box = document.getElementById('box');
// 添加事件
btn.onclick = function () {
    var ptrValue = https://www.cnblogs.com/bnzw/p/pt.value;
    box.innerHTML += ptrValue +'<br />';
    pt.valuehttps://www.cnblogs.com/bnzw/p/= '';
}
</script>