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 ...
随机推荐
- Linux-php安装mongodb
Linux-php安装mongodb 标签(空格分隔): php 安装mongodb 1 下载解压 下载压缩包 :https://www.mongodb.com/download-center?jmp ...
- java连接操作Oracle
package com.sp.test; import java.sql.*; import java.util.*; public class Text_lianxi extends Thread ...
- #p-complete原来比np更难
转载一下豆瓣的一个不知名的朋友的介绍: NP是指多项式时间内验证其解是否正确.比如: 我们给一个0-1背包的解,就可以在多项式时间内验证是否满足条件.至于是否能找到 满足条件的解,这在NP复杂度里没有 ...
- append生成新变量的时候，没有如预期（It's a feature，not a bug？）
这是我在写一个项目中,遇到的一个golang的feature,如代码所示,我在for循环里,每次用append生成一个新的数组,(当然我以前一直以为可以这样,直到我在stackoverflow上发现不 ...
- 学习参考《Python基础教程（第3版）》中文PDF+英文PDF+源代码
python基础教程ed3: 基础知识 列表和元组 字符串 字典 流程控制 抽象(参数 作用域 递归) 异常 魔术方法/特性/迭代器 模块/标准库 文件 GUI DB 网络编程 测试 扩展python ...
- springboot框架笔记——springboot提供的自动配置
Springboot基本配置 spring MVC的定制配置需要我们的配置实现一个WebMvcConfigurer接口,如果实在spring环境下需要使用@EnableWebMVC注解,来开启对spr ...
- unity C# StackOverflowException
有时候图省事,属性这样写public int pageCount{get{return pageCount;}set{pageCount=value;}}可能会报栈溢出的错误, StackOverfl ...
- maven中使用mybatis
1.Mybatis优缺点 优点: Mybatis实现了对Dao层的封装,隔离了SQL语句,便于管理,避免了像JDBC那样操作数据集,便于扩展等等. 缺点: Mybatis属于?半自动“ORM”,比Hi ...
- 第6章8节《MonkeyRunner源代码剖析》Monkey原理分析-事件源-事件源概览-小结
本章我们重点环绕处理网络过来的命令的MonkeySourceNetwork这个事件源来阐述学习Monkey是怎样处理MonkeyRunner过来的命令的.以下总结下MonkeyRunner从启动Mon ...
- github关联域名，创建个人站点教程终结篇
1.背景 近期心血来潮,买了一个域名,本来要买fuckgfw的,没想到被抢注了.就拿自己的英文名买了一个.叫做www.garvinli.com.由于知道会有非常多朋友不太清楚整个站点搭建的过程,所以在 ...