zoukankan      html  css  js  c++  java
  • jquery获取、改变元素属性值


    标签的属性称作元素属性,在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");









    _______________________________________________________________

  • 相关阅读:
    HTML学习(4)属性
    HTML学习(3)基础
    HTML学习(2)编辑器
    HTML学习(1)简介
    winform学习(10)设置控件透明背景色
    winform学习(9)无边框拖动窗体
    《分布式机器学习:算法、理论与实践》——【RE5】
    《分布式机器学习:算法、理论与实践》——【RE4】
    《机器学习在搜索广告中的机遇和挑战》
    >>《learning to rank(ltr)
  • 原文地址:https://www.cnblogs.com/ios9/p/7656483.html
Copyright © 2011-2022 走看看