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

随机推荐

ZoomIt（投影演示辅助软件）下载、安装与运行使用
下载ZoomIt后,打开即可使用:打开时,你讲看到如下的几个页面,这几个页面是为了介绍每个功能的使用,还可以去设定你觉得比较舒服的快捷键, 默认的是Ctrl+1屏幕放大.Ctrl+2屏幕标注,Ctrl ...
关于iOS适配问题
大家都知道在iOS开发当中对于UI适配问题可以从如下两个方面去考虑: 1.比例适配 2.利用autolayout自动布局通常情况来说,利用auto自动布局是一个比较好的方案,开发者可以利用story ...
jQuery的一些选择器
一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...
欢迎访问微先锋vXianFeng官方博客
欢迎访问微先锋vXianFeng官方博客,专注微商城.P2P理财.山寨矿机平台研究与开发!
新机器的vim配置
最近一直用vim去写acm代码,算是一种练习吧. 用着用着感觉不错,最近也稍微配置了一下vim,用着更舒服了键盘映射 ESC<->CapsLock 我们知道vim有自带的键盘映射命令,但 ...
Shell应用之网卡流量监测
需求分析 1)按固定时间监测一次网卡流量 2)当网卡流量为0时重启网卡一.网卡流量查询 sar(System ActivityReporter系统活动情况报告)是目前Linux上最为全面的系统性能分 ...
sql暂时表的创建
create table #simple /*仅仅对当前用户有效.其它用户无法使用,断掉连接后马上销毁该表*/ ( id int not null ) select * from #simple c ...
HDU 3008 Warcraft
题意:一个人有100点血和100点魔法,Boss有100点血.人有n个技能.每一个技能对Boss有a[i]点伤害, 且会消耗b[i] 的点魔量,人每秒会有t秒魔法恢复(最大为100)Boss每秒有q点 ...
web前端开发——AJAX入门
什么是AJAX AJAX: A New Approach to Web Applications XML AJAX是老技术新思想. 它所包括的内容我们之前都接触过.例如以下: (1)使用XHTML和C ...
wcf rest系列文章
http://www.cnblogs.com/artech/archive/2012/02/15/wcf-rest.html 需要注意的是,发布的服务,可以在web behavior中指定显示help ...

jquery18 css() : 样式的操作

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

随机推荐

热门专题