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 ...

随机推荐

Session原理、安全以及最基本的Express和Redis实现
Session原理.安全以及最基本的Express和Redis实现 https://segmentfault.com/a/1190000002630691
kotlin官方文档-1.0入门
什么是Kotlin? 图片发自简书App Kotlin是JetBrains开发的基于JVM的语言,JetBrains想必大家应该很熟悉了,他们创造了很多强大的IDE,android studio谷 ...
C语言基础-第五章
流程控制 1.顺序结构顺序结构是指程序将按照书写的顺序一步步执行程序. 2.选择结构 2.1但分支结构语句 if(表达式){语句} 2.2双分支结构 if(表达式){}else if{} else{ ...
为什么在input中加了display:inline;再加宽，还有作用？
以前一直一位input是个行内元素,但是,行内元素的特性就是没有宽高的概念,元素多高,多宽,全凭内容撑起来的. 但是今天写了个demo,用chrome控制台显示:display:inline-bloc ...
Spring 注解拦截器使用详解
Spring mvc拦截器平时用到的拦截器通常都是xml的配置方式.今天就特地研究了一下注解方式的拦截器. 配置Spring环境这里就不做详细介绍.本文主要介绍在Spring下,基于注解方式的拦截器 ...
fixed说明
http://blog.163.com/hc_ranxu/blog/static/367231822013102265151785/
如何使 nginx 支撑更高并发
/** * * * * 如何使 nginx 支撑更高的并发? * 原理: * 服务器方面可以从两个方面阐述: * 1.socket 链接方面:因为每次请求都是一次连接,而 nginx 服务器配置方面默 ...
[POI2008]KUP-Plot purchase（单调队列）
题意给定k,n,和n*n的矩阵,求一个子矩形满足权值和在[k,2k]之间 , 题解这里用到了极大化矩阵的思想.推荐论文<浅谈用极大化思想解决最大子矩阵问题>Orz 如果有一个元素在[k ...
Python组织文件实践：将文件的不同版本备份为ZIP文件
功能:备份文件夹.能将文件的不同版本备份下来,并且每个有不同的名字 #! python3 # backupToZip.py - 备份文件的不同版本到压缩文件中 import zipfile,os #f ...
Unity 设置窗体透明
设置窗口透明.窗口置顶.鼠标穿透方法一. 缺点:边缘不平滑,有毛边参考博客: 1.https://alastaira.wordpress.com/2015/06/15/creating-wi ...

jquery18 css() : 样式的操作

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

随机推荐

热门专题