<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ color:blue; background:blue; width:100px;} </style> <script src="jquery-2.0.3.js"></script> <script> 一些变量 function vendorPropName(){} function isHidden(){} function getStyles(){} function showHide(){} jQuery.fn.extend({ css show hide toggle }); jQuery.extend({ cssHooks cssNumber cssProps style css }); curCSS = function(){}; function setPositiveNumber(){} function augmentWidthOrHeight(){} function getWidthOrHeight(){} function css_defaultDisplay(){} function actualDisplay(){} 一些cssHooks $(function(){ console.log($('#div1').get(0).style.color);//原生方法，只能得到行内样式，不能得到外部css文件中的样式， console.log( window.getComputedStyle( $('#div1').get(0), null).color);//得到外部文件的样式，获取最终样式，行内样式和外部样式冲突时返回行内样式， console.log(window.getComputedStyle( $('#div1').get(0) , null ).background);//不能获取复合样式background,要写background-color, console.log($('#div1').get(0).style.background);//可以得到复合样式 console.log( $('#div1').css('color') ); $('#div1').css('color','yellow'); console.log( $('#div1').css('color') ); //$('#div1').css('color','yellow')--->jQuery.style()--->style //$('#div1').css('color')--->jQuery.css()--->curCSS = function(){}--->getComputedStyle console.log($('#div1').css(['color','backgroundColor','width'])); $('#div1').css({200,height:200}); $('#div1').css('width',function(){ return 500; }); ---------------------------------------------------------------- $('#div1').width()/height()/innerWidth()/innerHeight()/outerWidth()/outerHeight() $('#div1').css('background-color'); $('#div1').css('float'); getComputedStyle(oDiv,null).backgroundColor getComputedStyle(oDiv,null).backgroundColor style.cssFloat //class -> className //$('#div1').css('tranfroms'); $('#div1').css('width'); '123px' $('#div1').width(); 123 }); </script> </head> <body> <div id="div1" style="MozTranfroms">aaaaaaaaaaaa</div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width:100px;} </style> <script src="jquery-2.0.3.js"></script> <script> $(function(){ alert(window.getComputedStyle( $('#div1').get(0) , null )['filter']); alert(window.getComputedStyle( $('#div1').get(0) , null ).getPropertyValue('filter')); var $span = $('<span>');//动态创建一个元素 $span.css('width','100px'); $span.css('width'); console.log($('#div1').css('margin-left')); $('#div1').css('width','+=100'); }); </script> </head> <body> <div id="div1">aaaaaaaaaaaa</div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ display:none;} </style> <script src="jquery-2.0.3.js"></script> <script> $(function(){//检测dom节点加载完，有可能iframe里面的页面还没有加载完 $('#div1').hide();// display -> none $('#div1').show();// display -> block $('#div1').toggle(); $('#div1').toggle(false);// 只会 hide() $('#div1').toggle(true);// 只会 show() $('#div1').hide();// -> jQuery.css() -> getComputedStyle().display table -> data $('#div1').show();// -> elem.nodeName -> 'div' -> createElement('div'); -> jQuery.css() }); $(window).load(function(){//iframe里面的页面加载完了 //get(0)转原生 var div = $('iframe').get(0).contentWindow.document.getElementById('div1'); console.log(window.getComputedStyle(div,null).display); $(div).show(); $('iframe').show(); }); </script> </head> <body> <!--<div id="div1">aaaaaaaaaaaa</div>--> <iframe src="53jq.html" style="display:none"></iframe> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ display:none} </style> </head> <body> <div id="div1">aaaaaaaaaaa</div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; padding:10px; border:1px blue solid; margin:5px;} </style> <script src="jquery-2.0.3.js"></script> <script> $(function(){ console.log( $('#div1').css('opacity') );//1，不写是1 $('#div1').width()/height()/innerWidth()/innerHeight()/outerWidth()/outerHeight() ------------------------------------------------------------------- //$('#div1').width() -> $('#div1').css('width') console.log($('#div1').width()); //100 width console.log($('#div1').innerWidth()); //120 width + padding console.log($('#div1').outerWidth()); //122 width + padding + border console.log($('#div1').outerWidth(true)); //132 width + padding + border + margin $('#div1').width(200); //width = 200 $('#div1').innerWidth(200); //width = 200 - padding $('#div1').outerWidth(200); //width = 200 - padding - border $('#div1').outerWidth(200,true); //width = 200 - padding - border - margin console.log($('#div1').get(0).offsetWidth); //隐藏获取是0 console.log( $('#div1').width() ); //jquery隐藏也可以获取100 //$('#div1').width() , innerWidth() , outerWidth() //$.css() 获取 //$.style() 设置 //content/padding/border/margin //cssHooks.get() //cssHooks.set() function setPositiveNumber(){} function augmentWidthOrHeight(){} function getWidthOrHeight(){} $(window).height()//可视区的高 $(document).height()//整个页面的高度 $('div:visible') $('div').animate({ margin : '10px 20px 30px 40px' }); marginLeft -> 40 marginRight -> 20 marginTop -> 10 marginBottom -> 30 }); </script> </head> <body> <div id="div1" style="display:table-column">aaaaaaaaaaa</div> </body> </html>