jquery 设置属性和css样式

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

主题内容

jquery 设置属性和css样式

正文部分

看代码，注释，简单明了，实用，复制即用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/index5.js"></script>
  </head>
  <body>
    <div id="d1">
      <span>span双标签</span>文本
    </div>
    <input type="text" value="" id="uname"/>
  </body>
</html>

$(function(){
  //$("#d1").html("fuzhi");//双标签html元素内的值
  $("#d1").html();
  $("#uname").val("fuzhi");
  $("#uname").val();//表单元素内的值
  alert($("#d1").html());
  alert($("#d1").text());
  
  
})

jquery 设置属性和css样式_javascript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/index6.js"></script>
    <style>
      .img1{
        border: 3px solid red ;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <img src="img/1.jpg" id="img1"/>
    
  </body>
</html>

$(function(){
  //设置属性和取出属性的值
  alert($("#img1").attr("src"));
  
  $("#img1").attr("src","img/2.jpg");
  
  $("#img1").attr("class","img1");
  //删除属性
  $("#img1").removeAttr("class");
  
  //通过css设置样式
  $("#img1").css("width","200px");
  $("#img1").css({"width":"200px","height":"200px"});
  
  //通过addclass设置样式
  $("#img1").addClass("img1");
  $("#img1").removeClass("img1");
})

jquery 设置属性和css样式_javascript_02

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/index7.js"></script>
    <style>
      .div_clas{
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 2px solid blue;
        margin: 30px;
        position: absolute;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="div_clas">
      
    </div>
  </body>
</html>

$(function(){
  alert("width"+$(".div_clas").width());//width
  alert("innerwidth:"+$(".div_clas").innerWidth());//width+padding
  alert("outerwidth:"+$(".div_clas").outerWidth());//width+padding+border
  alert($(".div_clas").position().left);
})

jquery 设置属性和css样式_jquery_03