JQuery--jQquery控制CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
/**
* [JQ的CSS函数]
* 单属性修改(可以忽略)
* .css(属性,值)
* 多属性修改（推荐）
* .css({
* 属性:值
* });
* 更是推荐
* .css({
* "属性":"值(单位)", -- 代码通俗易懂
* });
* 单属性获取
* .css(属性)
* */
$('button:eq(0)').click(function () {
$('.main').css({
"width":"200px"
});
}); $('button:eq(1)').click(function () {
$('.main').css({
"height":"200px"
});
}); $('button:eq(2)').click(function () {
$('.main').css({
"background-color":"blue"
});
}); $('button:eq(3)').click(function () {
$('.main').css({
"width":"300px",
"height":"300px",
"background-color":"#666"
});
}); $('button:eq(4)').click(function () {
alert($('.main').width()+"px");
});
});
</script>
</head>
<body>
<button>变宽</button>
<button>变高</button>
<button>变色</button>
<button>三变</button>
<button>获取宽度，并弹窗</button>
<div class="main">
文字行号
</div>
</body>
</html>
JQuery--jQquery控制CSS样式的更多相关文章
- jQuery控制CSS样式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- jQuery基础 - 改变CSS样式
jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...
- JQuery中操作Css样式
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jquery轻松操作CSS样式
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- jquery 控制css样式
一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: $("p").css(&q ...
- zepto和jquery关于获取css样式的试用差别
例如 获取 html标签的 字体大小, zepto中方法:$("html").css( "font-size" ); jquery中方法:$("htm ...
- 用js语句控制css样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- webapp中<meta>与css代码部署
1.页面头部标签申明 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" id="te ...
- 【hihocoder 1477】闰秒
[题目链接]:http://hihocoder.com/problemset/problem/1477 [题意] 中文题 [题解] 首先,一年一年地加,把开始的年份和结束的年份之间的年根据是否为闰年; ...
- light oj 1079 01背包
#include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...
- 深入浅出 Java Concurrency (12): 锁机制 part 7 信号量（Semaphore）[转]
Semaphore 是一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从而可能释放 ...
- response - 文件下载
## 案例: * 文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1 ...
- JDBC1 --- 获取数据库连接的方式一 --- 技术搬运工（尚硅谷）
需要mysql-connector-java-5.1.7-bin.jar @Test public void testConnection1() throws SQLException { Drive ...
- Mycat+MySQL 主从复制
一.主从复制搭建(新环境5.6.33)1.设置复制Master配置信息 [mysqld] #repl master库 server \logbin\mysql-bin max_binlog_size= ...
- 二、Web Service开发(.net)
.net平台内建了对Web Service的支持,包括Web Service的构建和使用.与其它开发平台不同,使用.net平台,你不需要其他的工具或者SDK就可以完成Web Service的开发了.. ...
- reduce个数问题
reduce的数目到底和哪些因素有关 1.我们知道map的数量和文件数.文件大小.块大小.以及split大小有关,而reduce的数量跟哪些因素有关呢? 设置mapred.tasktracker.r ...
- python 中文乱码问
在本文中,以'哈'来解释作示例解释所有的问题,“哈”的各种编码如下: 1. UNICODE (UTF8-16),C854: 2． UTF-8,E59388: 3． GBK,B9FE. 一.python ...