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" ...
随机推荐
- Nginx报错汇总
1. Nginx 无法启动解决方法 在查看到 logs 中报了如下错误时: 0.0.0.0:80 failed (10013: An attempt was made to access a ...
- html如何设置表格单元格内容垂直居中?
父元素设置为表格的单元格元素td,而在表格单元格中的元素设置vertical-align: middle; 对父容器(td)使用:display: table-cell 其内子元素使用:vertica ...
- 装配SpringBean(六)--配置文件加载方式
spring中的配置文件有两种: 以XML结尾的spring配置文件 以properties结尾的属性配置文件 在spring中有两种方式加载这两种文件: 通过注解+java配置的方式 通过XML的方 ...
- js笔试-接收get请求参数
请编写一个JavaScript函数,它的用途是接收url中get请求的参数,并返回为对象, 如: var url = “https://i.cnblogs.com/EditPosts.aspx?opt ...
- PAT甲级——A1026 Table Tennis
A table tennis club has N tables available to the public. The tables are numbered from 1 to N. For a ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- oracle数据库忘记sys密码如何改密码
ORACLE服务器操作: 1.win+R打开dos窗口cmd 2.输入 sqlplus/nolog出现 3.输入 conn / as sysdba 出现 4. alter user sys ident ...
- Spring Cloud Eureka集群配置及注意事项(Greenwich版本)
Spring Cloud Eureka集群配置及注意事项(Greenwich版本) 一·概述 Spring Cloud Netflix Eureka 是一个提供服务注册与发现的套件.服务提供者只需要将 ...
- KeyOnlyFilter（2）
主要用来过滤剩下行键计数一类 KeyOnlyFilter 官方API解释如下: A filter that will only return the key component of each KV ...
- 一些linux"基本操作"的教程汇总
linux有些操作不用经常忘掉,如果忘掉还要到处找教程,所以想干脆汇总一些写的比较好的教程,免得下次再去找(完全个人向) 1. guake terminal http://blog.csdn.net/ ...