1-1-JS中的HTML属性操作

HTML:属性操作  

  属性包括 ： 属性名和 属性值  

  <input type="button" id="btn1" value="按钮" />

  如id='btn1'                id为属性名    btn1为属性值

      type="button"        type为属性名    button为属性值

      value="按钮"         value为属性名    按钮为属性值

   属性操作 ：读和写

   读：例如获取找到

  语法：元素.属性 例如 btn1.value    btn1.id 

1.<input type="button" id="btn1" value="按钮" />

   <script>

   window.onload = function(){
var obtn1 = document.getElementById('btn1');
alert(btn1.value); 弹出按钮
//alert(btn1.id);  弹出btn1
//alert(btn1.type);  弹出button
}
   </script>

2. <input type="text" id="text1"/><input type="button" id="btn1" value="按钮" />

    <script>
    window.onload = function(){
var obtn1 = document.getElementById('btn1');
var oText = document.getElementById('text1');
obtn1.onclick = function(){
alert(text1.value);
}
}
    </script>

3.  <select id="select1">
     <option value="北京">北京</option>
     <option value="上海">上海</option>
     <option value="杭州">杭州</option>
     </select>
     <input type="button" id="btn1" value="按钮" /> 

    <script>
     window.onload = function(){
var obtn1 = document.getElementById('btn1');
var oSelect1 = document.getElementById('select1');
obtn1.onclick = function(){
alert(oSelect1.value);
}
}
     </script>

   写：例如替换修改

  语法：元素.属性= 新的值   例如 btn1.value ='button'

1.<input type="button" id="btn1" value="按钮" /> 

   <script>
   window.onload = function(){
var obtn1 = document.getElementById('btn1');
obtn1.onclick = function(){
obtn1.value = 'button';
}
}
   </script>

2.<input type="text" id="text1"/>
<select id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<input type="button" id="btn1" value="按钮" /> 

<script>
window.onload = function(){
var obtn1 = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect1 = document.getElementById('select1');
obtn1.onclick = function(){
oText.value = oSelect1.value;
}
}
</script>

3.<input type="text" id="text1" value="请输入图片路径"/>
<input type="button" id="btn1" value="按钮" /> 
<img src="chinaz/images/active_bg.gif" id="img1"/>

<script>
window.onload = function(){
var obtn1 = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oImg = document.getElementById('img1');
obtn1.onclick = function(){
oImg.src = oText.value;
}
}
</script>

innerHTML 读取元素内的所有HTML内容   语法：元素.innerHTML=新的值

1.<input type="button" id="btn1" value="按钮" /> 
   <P id="P1">这是一句话</P>

<script>
window.onload = function(){
var obtn1 = document.getElementById('btn1');
var oP = document.getElementById('P1');
obtn1.onclick = function(){
//alert(oP.innerHTML);
oP.innerHTML='这是修改后的内容'
}
}
</script>

2.<input type="text" id="text1"/>
<input type="button" id="btn1" value="按钮" /> 
<P id="P1">这是一句话</P>

<script>
window.onload = function(){
var oText = document.getElementById('text1');
var oBtn1 = document.getElementById('btn1');
var oP = document.getElementById('P1');
oBtn1.onclick = function(){
oP.innerHTML=oText.value;
oText.value='';
}
}
</script>