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" ...
随机推荐
- leetcode 1078 Occurrences After Bigram
lc1078 Occurrences After Bigram trim().split()将原字符串转换成words数组 依次匹配first和second,若两者都能匹配上,则下一个单词为third ...
- Make the Most (Hackerrank Codeagon)
题目链接 Problem Statement Codenation is sending N of its employees to a High Profile Business Conferenc ...
- PHP实现微信退款的分析与源码实现
原文:https://blog.csdn.net/jason19905/article/details/78628349 网上的很多PHP微信支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通 ...
- 约束布局ConstraintLayout加快布局速度
Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之 ...
- Pycharm 添加第三方库
坏境:pycharm专业版 点击:file ——>setting ——>Project:python source code ——>Project interpreter ——> ...
- WhaleCTF之web-http呀
WhaleCTF之web-http呀 前往题目 不多说,看看源码 源码没有,抓包,发一下,也没有 猜测不是这个页面 burp抓包,把html改成php 发一下,在返回源码看到flag~
- DSP日志打印 LOG_printf
LOG_printf 依托BIOS环境,需要引用下列头文件: #include <std.h> #include <log.h> 并且,要在.tcf环境中添加一个LOG ...
- Scrapy的Request和Response对象
一.Request 发送一个请求,参数如下: url :request对象发送请求的url callback :在下载器下载完相应的数据后执行的回调函数 method :请求方法,默认为get hea ...
- Python基础---三大推导式
推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据结构构建另一个新的数据结构的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...
- JasperReport报表设计4
在JRXML模板(或JRXML文件)中的JasperReport 都是标准的 XML文件,以.JRXML扩展.所有JRXML文件包含标签<jasperReport>,作为根元素.这反过来又 ...