1. 程式人生 > >jquery獲取、改變元素屬性值

jquery獲取、改變元素屬性值

doc on() element 不同 .html cti 是否 top ack


標簽的屬性稱作元素屬性,在JS裏對應的DOM對象的對應屬性叫DOM屬性。JS裏的DOM屬性名有時和原元素屬性名不同。


  1 
  2 //返回元素指定屬性值
  3 var txt1_val=$("#txt1").attr("value");
  4 //通過元素的DOM屬性名更改DOM屬性值
  5 $("#txt1").attr({value : "txt1_value" , className : "txt1_class" });
  6 //通過指定元素屬性改變元素屬性值
  7 $("#txt1").attr("class","txt1_class2");
  8 //給指定元素屬性賦值,通過後面捆綁的方法返回值
9 $("#txt1").attr("class",function(){ 10 return"txt1_class3"; 11 }) 12 //移除指定的元素屬性 13 $("#txt1").removeAttr("class"); 14 15 //給CSS類即class元素屬性添加一個屬性值,可以添加多個之間用空格分開以下的對CSS類操作函數同樣可以填入多個CSS類 16 $("#txt1").addClass("txt1_classtxt1_class2"); 17 //判斷是否已有該CSS類,返回真假 18 $("#txt1").hasClass("txt1_classtxt1_class2
"); 19 //移除指定CSS類,用空格分開,如無指定則刪除該元素所有CSS類 20 $("#txt1").removeClass("txt1_class"); 21 //判斷是否有這個CSS類,有就刪除,沒有就添加 22 $("#txt1").toggleClass("txt1_class"); 23 //根據後面的返回真則添加此CSS類,假則刪除此CSS類 24 $("#txt1").toggleClass("txt1_class",false); 25 26 //返回指定CSS樣式值 27 $("#txt1").css("color"); 28 //一次賦多個樣式 29 $("#txt1
").css({color:"#ff0011",background:"blue"}); 30 //一次賦一個指定的樣式 31 $("#txt1").css("color","black"); 32 33 //設置元素的高度,無值則返回該元素的高度單位像素 34 $("#txt1").height(25); 35 //設置元素的寬度,無值則返回該元素的寬度 36 $("#txt1").width(150); 37 //獲取元素的內部高度,不包括邊框 38 $("#txt1").innerHeight(); 39 //獲取元素內部寬度,不包括變寬 40 $("#txt1").innerWidth(); 41 //獲取元素外部高度,包括邊框 42 $("#txt1").outerHeight(); 43 //獲取元素外部寬度,包括邊框 44 $("#txt1").outerWidth(); 45 46 //獲取元素相對窗口的偏移位置,返回兩個值,一個top值,一個left值 47 var txt1_offset=$("#txt1").offset(); 48 var top=txt1_offset.top; 49 var left=txt1_offset.left; 50 //返回相對父元素的相對偏移位置,返回兩個值一個top,一個left 51 var txt1_position=$("#txt1").position(); 52 var top=txt1_position.top; 53 var left=txt1_position.left; 54 55 //針對的元素具有垂直滾動條,設置從總體內容向下的第20行像素開始,顯示在滾動條可視窗口內上方頂端 56 //如無參數,則返回當前滾動條可視窗口上方頂點位置,距離整體內容上方頂點的距離 57 $("#div_outer").scrollTop(20); 58 //針對的元素具有橫向滾動條,設置從總體內容左側的第20列像素開始,顯示在滾動條可視窗口內左端頂點 59 //如無參數,則返回當前滾動條可視窗口左端頂點位置,距離整體內容左端頂點的距離 60 $("#div_outer").scrollLeft(20); 61 62


JS和Jquery獲取和修改label的值的示例代碼

一、label標簽在JS和Jquery中使用不能像其他標簽一樣用value獲取它的值,下面有個不錯的示例,希望大家可以學習下

二、獲取值:


label標簽在JS和Jquery中使用不能像其他標簽一樣用value獲取它的值:

  1 var label=document.getElementById("id");
  2 var value=label.value;
  3 var value=$("#id").val();


可以這樣:

  1 var label=document.getElementById("id");
  2 var value=label.innerText;


Jquery:

  1 var value=$("#id").html();


賦值:


不像Java,JS和Jquery不能這樣賦值:

  1 var label=document.getElementById("id");
  2 var value=label.innerText;
  3 value="XXXXXX";


  1 var value=$("#id").html();
  2 value="XXXXXX";
可以這樣賦值:
  1 var label=document.getElementById("id");
  2 label.innerText="XXXXXX";
  3 $("#id").html("XXXXX");









_______________________________________________________________

jquery獲取、改變元素屬性值