attr()用法:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的attr方法</title> </head> <body> <img src="../images/1.jpg" width="200" alt="风景" id="pic"> </body> </html> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> // attr() 元素属性的和修改,必须传参 // // 获取当前元素的值、 var res = $('#pic').attr('src') // 设置当前元素的值,双参数设置替换新值 $('#pic').attr('src','../images/2.jpeg') $('#pic').attr('style','border-radius:50%') // 直接添加自定义属性 var res = $('#pic').attr('guojia') // 支持回调函数,设置属性值 $('#pic').attr('width',function(){return 150}) // removeattr()删除元素属性 var res = $('#pic').removeAttr('alt style') // 控制台输出 console.log(res) </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css()用法
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的CSS方法</title> </head> <body> <img src="../images/1.jpg" alt=""> </body> </html> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> //宽高 var res = $('img').css('width','200') var res = $('img').css('height','200') // 边框,圆角 var res = $('img').css('border','1px solid red') .css('border-radius','50%') // 获取元素宽高 var res = $('img').css('height') // 获取后直接修改高度 var res = $('img').height(300) // offset(),元素和浏览器边框的偏移量 var res =$('img').offset() var res =$('img').offset().left // position() var res = $('img').position() var res = $('img').position().left+'px' // 控制台输出 console.log(res) </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码: