<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="javascripts/http_code.jquery.com_jquery-2.0.0.js"></script> <style> img{ width:100%; height: 100%; border: 1px solid; } </style> </head> <body> <img src="images/b1_01.png" alt="" style="opacity: 0.2"> <script> // var img = document.getElementsByTagName("img")[0]; // console.log(img.style);//只能获取到行内的style // img.style.opacity=1;//动态添加到内联标签 // img.style.borderColor = "red";//动态添加到内联标签 // // // console.log(window.getComputedStyle(img,null).width);//能查询到内嵌style样式不能修改 // //console.log(img.currentStyle.width); // // // jquery 无论是内联还内嵌 style都可以获取和修改 // var $img = $("img"); // console.log($img.css("opacity")); // console.log($img.css("width")); // // $img.css("opacity",1); // $img.css("width","1000px"); </script> </body> </html>1、首先说一说原生js怎样获取与修改元素
修改var img = document.getElementsByTagName("img")[0]; 先获取到一个img console.log(img.style) //此时获取到了元素的内联style opacity 此时可以修改opacity的值 比如:img.style.opacity = 1;opacity由0.2变成了1; 所以:<img src="images/b1_01.png" alt="" style="opacity: 1"> 在比如:img.style.borderColor = "red";<img src="images/b1_01.png" alt="" style="opacity: 1;borderColor="red"">直接动态添加到了行内 。。。。当然还可以添加其他属性或者复写内嵌样式中的属性至行内样式中 获取console.log(img.style);//获取到行内的style 并且能够修改
img.style.opacity=1console.log(window.getComputedStyle(img,null).width);//能查询到内嵌style样式但是不能修改 除了IEconsole.log(img.currentStyle.width);//IE获取内嵌style样式 但也不能修改
img.style.width="1000px";//复写内嵌样式中的属性至行内样式2、说一说jquery获取与修改元素var $img = $("img");console.log($img.css("opacity")); //获取到行内style console.log($img.css("width"));//获取到内嵌style $img.css("opacity",1);//修改行内style $img.css("width","1000px");//修改内嵌style ********jquery 无论是行内style还是内嵌style 都能直接获取 和 修改 ********jquery比原生js方便 原生js修改内嵌样式需要复写内嵌样式 然后保存至行内样式中 记录下来是怕自己又忘记了 写得有点乱
原生style 与 jquery 获取修改元素总结
最新推荐文章于 2025-06-12 11:54:20 发布