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

随机推荐

38.angular的scope作用域
转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...
ELK搭建（filebeat、elasticsearch、logstash、kibana）
ELK部署(文章有点儿长,搭建时请到官网将tar包下载好,按步骤可以完成搭建使用) ELK指的是ElasticSearch.LogStash.Kibana三个开源工具 LogStash是负责数据的收集 ...
ScrollView嵌套GridView不显示顶部
/* * scrollView中嵌套GridView不能显示头部 * * 方案①:scrollView.smoothScrollTo(0, 0); * * ...
POJ1201Intervals(差分约束）
题意给出数轴上的n个区间[ai,bi],每个区间都是连续的int区间. 现在要在数轴上任意取一堆元素,构成一个元素集合V 要求每个区间[ai,bi]和元素集合V的交集至少有ci不同的元素求集合V最 ...
echarts 初始化失败问题。
dom 实例容器,一般是一个具有高宽的div元素. 注:如果div是隐藏的,ECharts 可能会获取不到div的高宽导致初始化失败,这时候可以明确指定div的style.width和style.he ...
使用npm上传npm包
npm是一个node的包管理仓库,一个网站,也是一条命令.如何给node里增加npm包呢?只需三步就搞定. 第一步:在开始里边打开cmd进入自己的项目中,在项目目录中输入 npm init 回车会有一 ...
Mysql之索引的基本概念
一.索引是什么? 比如我们要在字典中找某一字,如何才能快速找到呢?那就是通过字典的目录. 对数据库来说,索引的作用就是给‘数据’加目录. 二.索引算法设有N条随机记录,不用索引,平均查找N/2次,那 ...
1.MVC概要与angular概要、模板与数据绑定
转自:https://www.cnblogs.com/best/p/6242011.html#_label3_0_8_2 一.前端MVC概要 1.1.库与框架的区别 1.2.AMD与CMD 1.2.前 ...
nodejs-website
http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs http://nodeapi.ucdok.com/ ...
mybatis+springmvc+sqlite一个累心的问题:不在纠结
1 java.sql.SQLException: NYI 2 org.sqlite.RS.getColumnClassName(RS.java:269) 在配置mybatis+springmvc+sq ...

jquery18 css() : 样式的操作

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

随机推荐

热门专题