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

随机推荐

django uWSGI nginx搭建一个web服务器确定可用
网上的找了很多篇不知道为什么不行,于是自己搭建了一个可用的Web 大家可按步骤尝试总结下基于uwsgi+Nginx下django项目生产环境的部署准备条件: .确保有一个能够用runserver ...
Automation testing tool comparison - UFT & CodedUITest
Ease of Use - Recording and Playback Functionality UFT provides 4 models to record a new test. Norma ...
BZOJ 4551 HEOI 2016 树（并查集）
思路: 考虑时光倒流这不就是并查集裸题了-----. //By SiriusRen #include <cstdio> #include <cstring> #include ...
java9新特性-1-概述
经过4次跳票,历经曲折的java 9 终于终于在2017年9月21日发布. 2.哪些人适合看这套视频? 已经熟悉或熟练运用java 8 及之前 java 版本的开发人员.科研人员.学生及 ...
最近Criteria
第一次用Criteria,于是查了一下http://langgufu.iteye.com/blog/2039554 新鲜事排序算法http://www.zhihu.com/question/20319 ...
第一性原理：First principle thinking是什么？
作者:沧海桑田链接:https://www.zhihu.com/question/40550274/answer/225236964来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
webpack(零工程构建一个前端项目)详解
工作流程记录: 1.初始化项目:npm init -y 2.安装webpack,vue,vue-loader npm install webpack vue vue-loader 3.按装之后根据警告 ...
vue项目的一些最佳实践提炼和经验总结
项目组织结构 ajax数据请求的封装和api接口的模块化管理第三方库按需加载利用less的深度选择器优雅覆盖当前页面UI库组件的样式 webpack实时打包进度 vue组件中选项的顺序路由的懒加 ...
js数组去重问题
1. 双层循环:外层循环,内层比较值: (1)利用splice直接在原数组进行操作 Array.prototype.delRepeat = function (){ var arr = this; v ...
ZJU 1346 Comparing Your Heroes 状态压缩DP 拓扑排序的计数
做多校的时候遇见一个求拓扑排序数量的题,就顺便来写了一下. 题意: 你有个朋友是KOF的狂热粉丝,他有一个对其中英雄的强弱比较,让你根据这些比较关系来给这些英雄排名.问一共有多少种排名方式. 思路: ...

jquery18 css() : 样式的操作

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

随机推荐

热门专题