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" ...
随机推荐
- 验证sll证书与密钥
$crtParse = openssl_x509_parse($ssl_content); //$ssl_content 证书内容 .crt文件内容 if (!$crtParse) { return ...
- transform函数
C++学习[原创]transform函数的应用 transform(first,last,result,op);//first是容器的首迭代器,last为容器的末迭代器,result为存放结果的容器, ...
- phpqrcode.php 生成二维码图片用于推广
<?php /* * PHP QR Code encoder * * This file contains MERGED version of PHP QR Code library. * It ...
- Ionic 不随系统字体而变化
1.添加插件phonegap-plugin-mobile-accessibility cordova plugin add https://github.com/phonegap/phonegap-m ...
- HDU - 3007 Buried memory
传送门 最小圆覆盖模板. //Achen #include<algorithm> #include<iostream> #include<cstring> #inc ...
- vue中使用vue-echarts
一.先说在原生里怎么使用echarts <!-- 1.引入echarts文件 --> <script src="echarts.min.js"></s ...
- PAT甲级——A1040 Longest Symmetric String
Given a string, you are supposed to output the length of the longest symmetric sub-string. For examp ...
- Java学习记录--ModelMapper的使用
在项目中很多时候需要把Model和DTO两个模型类来回转换,保证Model对外是隐私的,同时类似密码之类的属性也能很好地避免暴露在外了. 那么ModelMapper就是为了方便转换而实现的一个类库,下 ...
- SQL 查询--日期条件（今日、昨日、本周、本月。。。） (转)
主要用到sql 函数 DATEDIFF(datepart,startdate,enddate) sql 语句,设 有 数据库表 tableA(日期字段ddate) ——查询 今日 select * f ...
- JasperReport编译报表设计5
我们在前面的章节中产生的JasperReport模板(JRXML文件).这个文件不能直接用于生成报告.它必须被编译成JasperReport的“本地二进制"格式,称为Jasperfile.在 ...