jQuery学习-设置访问元素样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问与设置元素样式</title>
<script src="js/jquery.js"></script>
<style>
.divstyle{ border: 5px solid black;
background-color: silver;
}
.trstyle{ background-color: lightskyblue;;
color: black;
}
.
</style> <script type="text/javascript">
//页面加载完成简写形式
$(function(){ //设置单元格宽度100px
//$("td").css("width","300px");
//$("td").css("font-size","30px");
//$("td").css("color","red");
//$("td").css("border","1px solid red"); $("td").css({"width":"300px","font-size":"30px","color":"red","border":"1px solid red"}) //获取div背景颜色,css可以设置元素属性,也可以获取css属性
var color= $("div").css("background-color");
alert(color); //设置斑马线,隔行背景颜色变成蓝色,字体变黑色 odd偶数行,如果同时设置多个类加,号隔开
$("tr:odd").addClass("trstyle"); //移出对应元素的css样式,移出DIV的样式,如果不穿参数,则表示移出所有CSS样式
$("div").removeClass("divstyle");
}) </script>
</head>
<body>
<div class="divstyle">
<table>
<tr><td>用户名1</td><td>密码1</td></tr>
<tr><td>用户名2</td><td>密码2</td></tr>
<tr><td>用户名3</td><td>密码3</td></tr>
<tr><td>用户名4</td><td>密码4</td></tr>
<tr><td>用户名5</td><td>密码5</td></tr>
<tr><td>用户名6</td><td>密码6</td></tr>
<tr><td>用户名7</td><td>密码7</td></tr>
<tr><td>用户名8</td><td>密码8</td></tr>
<tr><td>用户名9</td><td>密码9</td></tr>
<tr><td>用户名10</td><td>密码10</td></tr>
</table>
</div>
</body>
</html>
jQuery学习-设置访问元素样式的更多相关文章
- DOM访问元素样式和操作元素样式
在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...
- 第二十四篇 jQuery 学习6 删除元素
jQuery 学习6 删除元素 上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- CSS - 设置 select 元素的样式
注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. ...
- Vue.js-04:第四章 - 页面元素样式的设定
一.前言 前端开发中有三大件:HTML.CSS.JavaScript,在前面的学习中,不管是学习 Vue 的指令系统还是 Vue 的事件修饰符,主要还是针对的是我们在前端开发中的 JavaScript ...
- jQuery学习笔记(4)-设置元素的属性和样式
一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...
- jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
- 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- Prometheus Node_exporter 之 Basic CPU / Mem / Disk Gauge
1. CPU Busy :收集所有 cpu 内核 busy 状态占比 type: SinglestatUnit: perent(0-100)(所有 cpu使用情况 - 5分钟内 cpu 空闲的平均值) ...
- 创建和修改 ExpressRoute 线路
本文介绍如何使用 Azure 门户和 Azure Resource Manager 部署模型创建 Azure ExpressRoute 线路. 以下步骤还说明如何查看线路状态,以及如何更新.删除和取消 ...
- oracle中存储过程把表导出txt文件
create or replace directory MY_DIR as 'D:\MY_DIR\'; grant read,write on directory MY_DIR to adm; sel ...
- 我的第一个springboot应用+maven依赖管理
第一步:使用Eclipse创建maven工程SpringBootFirst:工程目录如下 第二步:编写依赖文件pom.xml <project xmlns="http://maven. ...
- 一、DAO设计模式 二、DAO设计模式的优化 三、JDBC中的事务,连接池的使用
一.DAO设计模式概述###<1>概念 DAO,Data Access Object ,用于访问数据库的对象. 位于业务逻辑和数据持久化层之间,实现对数据持久化层的访问 ...
- UI(三)
1. 2.经常用到的loadmap函数 void CTopology::LoadMap() { //m_map.RemoveAllLayers(); AddLayersBasemap(); AddLa ...
- iPhone/android的viewport 禁止页面自动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...
- U-Mail如何实现邮件营销自动化?
对于很多企业来说,人力成本可能就是最大的成本支出了,如果能节省这方面成本支出,也就意味着公司增收了,因此很多公司在做营销工作时,都希望营销能够高效率.有系统.有规划.循序渐进的开展,同时还要减轻营销人 ...
- CI(2.2) 配置 jquery的上传插件Uploadify(v3.2) 上传文件
1.下载uploadify, 我的是v3.2 2.模板页面引入: <base href='{base_url()}' /> <script type="text/jav ...
- [转]Linux下查看CPU信息、机器型号等硬件信息
From: http://www.jbxue.com/LINUXjishu/14582.html 查看CPU信息(型号) : # cat /proc/cpuinfo | grep name | cut ...