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" ...
随机推荐
- github 访问加速
http://nullpointer.pw/github%E4%BB%A3%E7%A0%81clone%E5%8A%A0%E9%80%9F.html hosts:https://raw.githubu ...
- js节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq 实现头像（气泡式浮动）
前提:假设每个头像都装在li中. function headMove() { $('li').each(function () { var myLeft = Math.floor(Math.rando ...
- httpclient遇到java.net.URISyntaxException: Illegal character in scheme name at index 0:
正准备按照大佬的解决办法处理, 看会一条回复,说url有空格 检查了一下,还真是有空格 去除url中的空格,问题解除
- VMWare下载安装以及创建虚拟机教程
参考博客https://blog.csdn.net/qq_39135287/article/details/83993574 下载 1.打开官网https://www.vmware.com/cn.ht ...
- ajax原理及使用
1.关于同步和异步 异步传输是面向字符的传输,它的单位是字符:而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的. 具体来说,异步传输是将比特分成小组来进行传送 ...
- 【vue】/vue-ele-project
作者大大的地址是:https://github.com/JinwenXie/vue-ele-project 还是老办法,先运行项目看看效果 我不算是外卖爱好者,不过觉得那个添加商品到购物车的动画效果很 ...
- layui -page 分页类
<?phpnamespace page; // +---------------------------------------------------------------------- / ...
- global.fun.php
<?php /** 所有公共函数文件*/ /** 序列化*/function _serialize($obj){ return base64_encode(gzcompress( ...
- LUOGU P2441 角色属性树
题目描述 绪萌同人社是一个有趣的组织,该组织结构是一个树形结构.有一个社长,直接下属一些副社长.每个副社长又直接下属一些部长--. 每个成员都有一个萌点的属性,萌点属性是由一些质数的萌元素乘积构成(例 ...