//標簽的屬性稱作元素屬性，在JS里對應的DOM對象的對應屬性叫DOM屬性。JS里的DOM屬性名有時和原元素屬性名不同。//==================================操作元素屬性==================================//返回元素指定屬性值var txt1_val=$("#txt1").attr("value");//通過元素的DOM屬性名更改DOM屬性值$("#txt1").attr({ value : "txt1_value" , className : "txt1_class" });//通過指定元素屬性改變元素屬性值$("#txt1").attr("class","txt1_class2");//給指定元素屬性賦值，通過后面捆綁的方法返回值$("#txt1").attr("class",function(){return "txt1_class3";})//移除指定的元素屬性$("#txt1").removeAttr("class");//==================================修改CSS類==================================//給CSS類即class元素屬性添加一個屬性值，可以添加多個之間用空格分開以下的對CSS類操作函數同樣可以填入多個CSS類$("#txt1").addClass("txt1_class txt1_class2");//判斷是否已有該CSS類，返回真假$("#txt1").hasClass("txt1_class txt1_class2");//移除指定CSS類，用空格分開，如無指定則刪除該元素所有CSS類$("#txt1").removeClass("txt1_class");//判斷是否有這個CSS類，有就刪除，沒有就添加$("#txt1").toggleClass("txt1_class");//根據后面的返回真則添加此CSS類，假則刪除此CSS類$("#txt1").toggleClass("txt1_class",false);//==================================修改CSS屬性==================================//返回指定CSS樣式值$("#txt1").css("color");//一次賦多個樣式$("#txt1").css({color:"#ff0011",background:"blue"});//一次賦一個指定的樣式$("#txt1").css("color","black");//==================================寬和高相關==================================//設置元素的高度，無值則返回該元素的高度單位像素$("#txt1").height(25);//設置元素的寬度，無值則返回該元素的寬度$("#txt1").width(150);//獲取元素的內部高度，不包括邊框$("#txt1").innerHeight();//獲取元素內部寬度，不包括變寬$("#txt1").innerWidth();//獲取元素外部高度，包括邊框$("#txt1").outerHeight();//獲取元素外部寬度，包括邊框$("#txt1").outerWidth();//==================================位置相關==================================//獲取元素相對窗口的偏移位置，返回兩個值，一個top值，一個left值var txt1_offset=$("#txt1").offset();var top=txt1_offset.top;var left=txt1_offset.left;//返回相對父元素的相對偏移位置，返回兩個值一個top，一個leftvar txt1_position=$("#txt1").position();var top=txt1_position.top;var left=txt1_position.left;//針對的元素具有垂直滾動條，設置從總體內容向下的第20行像素開始，顯示在滾動條可視窗口內上方頂端//如無參數，則返回當前滾動條可視窗口上方頂點位置，距離整體內容上方頂點的距離$("#div_outer").scrollTop(20);//針對的元素具有橫向滾動條，設置從總體內容左側的第20列像素開始，顯示在滾動條可視窗口內左端頂點//如無參數，則返回當前滾動條可視窗口左端頂點位置，距離整體內容左端頂點的距離$("#div_outer").scrollLeft(20);

轉載于:https://blog.51cto.com/8486002/1388145

總結

以上是生活随笔為你收集整理的JQuery元素操小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。