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 ...
随机推荐
- PostgreSQL Replication之第七章 理解Linux高可用（4）
7.4 术语与概念 一组计算机被称为集群.集群内的一台计算机被称为一个节点. 当集群内的节点数量是 N (2,,3,等.) ,那么我们讨论一个N节点的集群. 高可用性软件,传输层和集群管理层都运行于每 ...
- Python3基础笔记--常用模块
目录: 参考博客:Python 之路 Day5 - 常用模块学习 Py西游攻关之模块 一.time模块 二.random模块 三.os模块 四.sys模块 五.hashlib模块 六.logging模 ...
- 由于webpack-cli版本问题造成的错误
The CLI moved into a separate package: webpack-cli Please install 'webpack-cli' in addition to webpa ...
- caioj 1076 动态规划入门（中链式3：最大的算式）
一开始写了一个复杂度很大的方法,然后还过了(千万记得开longlong ) #include<cstdio> #include<cstring> #include<alg ...
- [转] C# HttpWebRequest 绝技
c# HttpWebRequest与HttpWebResponse绝技 阅读原文 如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧.本文章会对Http请求时的G ...
- Android开发之Volley网络通信框架
今天用了一下Volley网络通信框架,感觉挺好用的,写个博客记录一下用法.方便以后VC. Volley(Google提供的网络通信库,能使网络通信更快,更简单,更健壮.) 功能模块: 1. JSON, ...
- 实习第一天（安装svn管理工具跟tomcat插件）
在eclipse中安装svn管理解压工具是有好几种方法. 方法1 1>可以直接下载svn插件subclipse,之后进行解压 2>然后将将插件包features和plugins目录中的文件 ...
- Android开发之蓝牙(Bluetooth)操作(二)--修改本机蓝牙设备的可见性,并扫描周围可用的蓝牙设备
版权声明:本文为博主原创文章,未经博主允许不得转载. 一. 修改本机蓝牙设备的可见性 二. 扫描周围可用的蓝牙设备 Eg: 一. 清单文件AdroidManifest.xml: <?xml v ...
- php中对象转数组有哪些方法（总结测试）
php中对象转数组有哪些方法(总结测试) 一.总结 一句话总结:json_decode(json_encode($array),true)和array强制转换(或带递归) 1.array方式强制转换对 ...
- 源码编译安装Nginx全程视频演示
基本步骤: 1.首先停止现有web系统, #/etc/init.d/apache2 stop 2.将源码拷贝到/usr/local/src #cp /home/ditatompel/Public/Ng ...