jquery获取、改变元素属性值

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

目录

• 标签的属性称作元素属性，在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。
• JS和Jquery获取和修改label的值的示例代码
  • 一、label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值，下面有个不错的示例，希望大家可以学习下
  • 二、获取值：
  • 赋值：

 

正文

回到顶部

标签的属性称作元素属性，在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类即class元素属性添加一个属性值，可以添加多个之间用空格分开以下的对CSS类操作函数同样可以填入多个CSS类
$("#txt1").addClass("txt1_classtxt1_class2");
//判断是否已有该CSS类，返回真假
$("#txt1").hasClass("txt1_classtxt1_class2");
//移除指定CSS类，用空格分开，如无指定则删除该元素所有CSS类
$("#txt1").removeClass("txt1_class");
//判断是否有这个CSS类，有就删除，没有就添加
$("#txt1").toggleClass("txt1_class");
//根据后面的返回真则添加此CSS类，假则删除此CSS类
$("#txt1").toggleClass("txt1_class",false);

//返回指定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，一个left
var txt1_position=$("#txt1").position();
var top=txt1_position.top;
var left=txt1_position.left;

//针对的元素具有垂直滚动条，设置从总体内容向下的第20行像素开始，显示在滚动条可视窗口内上方顶端
//如无参数，则返回当前滚动条可视窗口上方顶点位置，距离整体内容上方顶点的距离
$("#div_outer").scrollTop(20);
//针对的元素具有横向滚动条，设置从总体内容左侧的第20列像素开始，显示在滚动条可视窗口内左端顶点
//如无参数，则返回当前滚动条可视窗口左端顶点位置，距离整体内容左端顶点的距离
$("#div_outer").scrollLeft(20);

回到顶部

JS和Jquery获取和修改label的值的示例代码

一、label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值，下面有个不错的示例，希望大家可以学习下

二、获取值：

label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值：

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

可以这样：

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

Jquery:

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

赋值：

不像Java，JS和Jquery不能这样赋值：

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

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

可以这样赋值：

var label=document.getElementById("id");
label.innerText="XXXXXX";
$("#id").html("XXXXX");

_______________________________________________________________