jquery18 css() : 样式的操作

<!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({width: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>

posted @ 2017-06-06 02:49 无天666 阅读(180) 评论(0) 收藏举报

刷新页面返回顶部

672530440

jquery18 css() : 样式的操作

公告