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>

jquery18 css() : 样式的操作的更多相关文章

利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作
HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...
JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
CSS样式之操作属性二
********css样式之属性操作******** 一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.vertical-al ...
CSS样式之操作属性一
********css之操作属性******** 一.文本 1.文本颜色:color 颜色属性被用来设置文字的颜色颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 ...
jquery源码09 (6058 , 6620) css() : 样式的操作
var curCSS, iframe, // swappable if display is none or starts with table except "table", & ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
jquery轻松操作CSS样式
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
try.jquery-5-styling里的各种css样式操作
你好,这里是我的http://try.jquery.com/学习笔记: 这次来学习操作各种css. 主要对这段html元素进行操作. <div id="all-tours"& ...
jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作位置操作尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

随机推荐

CUDA学习笔记（四）
昨天一直在写ben的作业.总结一下周一的cuda情况. cuda程序需要用到一些设置的参数,如argv[],另外cuda读入文件特别苛刻,只能采用C的方式,而且对w+,r的使用只有试通才行. 卧底天外 ...
gcd（最大公约数）lcm（最小公倍数）E - Wolf and Rabbit
1.gcd 递归实现 int gcd(int i,int j){ if(j==0) return i; else return gcd(j,i%j);} 2.lcm int gcd(int i,int ...
python2中打印列表与字典内的中文字符
在开发过程中,我们经常需要打印一些变量的值,便于调试.这个时候就会发现如果在列表与字典这些容器中,如果包含中文字符,不管是str类型,还是unicode类型,都打印不出来.如下: >>&g ...
NodeJS学习笔记 (19)进阶调试-debugger(ok)
写在前面谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍如何在本地通过nod ...
letCode(771 Jewels and Stones )
问题描述: You're given strings J representing the types of stones that are jewels, and S representing th ...
cookie 实现记住用户名演示通过代码迅速理解cookie
// 登录页可直接 tomcat部署测试 1 package com.itheima.login; import java.io.IOException; import java.io.Print ...
dmesg---检查和控制内核的环形缓冲区
dmesg命令被用于检查和控制内核的环形缓冲区.kernel会将开机信息存储在ring buffer中.您若是开机时来不及查看信息,可利用dmesg来查看.开机信息保存在/var/log/dmesg文 ...
caioj 1087 动态规划入门（非常规DP11：潜水员）(二维背包)
这道题的难点在于价值可以多. 这道题我一开始用的是前面的状态推现在的状态实现比较麻烦,因为价值可以多,所以就设最大价值为题目给的最大价值乘以10 #include<cstdio> #i ...
【转载】C# 跨线程调用控件
转自:http://www.cnblogs.com/TankXiao/p/3348292.html 感谢原作者,转载以备后用在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停 ...
C语言typedef struct具体解释
在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...

jquery18 css() : 样式的操作

jquery18 css() : 样式的操作的更多相关文章

随机推荐

热门专题