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

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

    本文原创,转载请注明出处:http://www.eziep.net:80/details/17.html

  • 相关阅读:
    第02组 Beta冲刺(4/5)
    第02组 Beta冲刺(3/5)
    第02组 Beta冲刺(2/5)
    第02组 Beta冲刺(1/5)
    第02组 Alpha事后诸葛亮
    第02组 Alpha冲刺(6/6)
    第02组 Alpha冲刺(5/6)
    第02组 Alpha冲刺(4/6)
    第02组 Alpha冲刺(3/6)
    2020系统综合实践1 微服务与Docker 基本入门
  • 原文地址:https://www.cnblogs.com/panmy/p/5018387.html
Copyright © 2011-2022 走看看