<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
#mydiv{
height:80px;
border:1px solid red;
}
.div1{
background:blue;
}
.div2{
padding:20px;
}
.div3{
margin:20px;
}
.div4{
text-align:center;
}
</style>
</head>
<body>
<div id="mydiv" style="width:150px;">css常用操作</div>
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
css的水很深呀,只说说js跟css的简单交互.
*/
/*
获取css,一般通常都是获取css的高度,宽度,边距等.
*/
var div = document.getElementById("mydiv");
//获取宽度
var width = div.style.width;
console.log(width);//150px;
//获取高度
var height = div.style.height;
console.log(height);//"",是空值!可是明明有高度哦,为什么呢?
/*
css有两种方式,一种是直接写在dom属性style里面,还有一种是通过class引用样式表里面的样式.
直接通过属性获取,只能得到直接写到style属性中的样式,
样式表的样式需要通过currentStyle(IE)和getComputedStyle(非IE)获取.
*/
/*
既然如此,那我们可以写一个函数来区分这两种情况,获取想要的css
*/
function getStyle(ele,attr){
var css = "";
if(typeof ele == "object" && ele != null && attr != null){
if(ele.currentStyle){
//ie系列
css = ele.currentStyle[attr];
}
else{
//非ie系列
css = document.defaultView.getComputedStyle(ele,false)[attr];
}
}
return css;
}
var div = document.getElementById("mydiv");
//获取宽度
var width = getStyle(div,"width");
console.log(width);//150px;
//获取高度
var height = getStyle(div,"height");
console.log(height);//80px;
/*
比起获取css的值,更多的时候我们需要修改css.
比如做一些动画效果,改变按钮的状态等等.
那么如何通过js修改css呢?
一般来说有三种方式,直接改变className,改变cssText,或者直接修改css属性.
但是最后一种是最不推荐的.
*/
//直接改变className
var div = document.getElementById("mydiv");
//改变div的class = div1
div.className = "div1";
//如果有多个class,也可以直接赋值
div.className = "div1 div2";
//改变cssText
var css = "font-size:20px;"
div.style.cssText = css;
//这样我们发现原来的width属性失效了.因为cssText是等于全部重写了style的全部样式.
//所以如果有多个样式的话,可以这样写.
var css = "font-size:20px;width:200px;color:white;";
div.style.cssText = css;
//还有一种就是直接改css属性
div.style.width = "300px";
div.style.fontSize = "30px";//注意如果属性是多单词,首字母要大写哦.
//如果需要改多个属性,就需要改多次,可能造成页面的多次重排和重绘,影响性能,所以要根据实际情况使用.
/*
jquery时间
*/
//获取css
var width = $("#mydiv").css("width");
var height = $("#mydiv").css("height");
console.log("width:" + width + ",height:" + height);//width:300px,height:80px
//通过jquery获取css,就不用考虑css是写在style中,还是class了,因为jquery都封装好了,类似我们的getStyle方法.
//添加className
$("#mydiv").addClass("div3");
//添加多个className
$("#mydiv").addClass("div3 div4");
//修改css属性
$("#mydiv").css("width","400px");
//修改多个css属性
$("#mydiv").css({width:"400px",height:"200px"});
/*
知识点:
1.js获取css属性,要区分style和class,最好通过currentStyle(IE)和getComputedStyle(非IE)获取.
2.修改css有三种方法,要根据实际情况使用,多次修改css属性可能造成页面多次渲染,影响性能,需要注意.
3.介绍了jquery操作的css方法.
*/
</script>
分享到：
相关推荐
这个"团队介绍html.zip"文件提供了一个HTML团队模板，适用于展示多人团队项目和个人介绍，帮助用户快速创建专业且吸引人的在线团队展示页面。PUDN（Programmers University Developer Network）是一个程序员和开发者...
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
【标题】"html-css-网页模板-团队介绍" 指的是一个基于HTML和CSS设计的网页模板，专门用于展示团队成员的介绍。这个模板可能包含各种页面元素和布局，如团队成员的照片、简介、职位、联系方式等，帮助网站访客了解一...
《程序猿炫酷个人介绍HTML源码》是一个专为程序员设计的、用于展示个人技能和经验的网页模板。这个源码充分利用了HTML5的新特性，结合CSS3的动画效果，打造出一个充满科技感且交互性强的个人简历页面。在Web开发领域...
【企业介绍单页HTML模板】是一种专为展示企业信息而设计的网页模板，它基于流行的前端框架Bootstrap构建，提供了一种高效、快捷的方式来创建专业且吸引人的企业官方网站。Bootstrap是Twitter开发的一个开源工具，...
这个名为"html+js+css自我介绍"的项目，显然利用这三种语言创建了一个动态的个人简历展示页面，其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...
漂亮大气VIP会员介绍页面 html单页源码无需数据库 扒的某站漂亮大气VIP会员介绍页面 html单页源码无需数据库 刚流出的众人帮任务悬赏平台新UI版本，去除了短信注册接收验证码（当然也可以加），充值对接了Z支付个人...
本课程设计项目是一个基于HTML构建的游戏介绍网站，旨在教授学生如何使用HTML、CSS等前端技术来创建一个功能齐全、信息丰富的网页平台。这个网站能够展示各种游戏的信息，包括游戏简介、截图、攻略等内容，为用户...
适合向非IT人员讲解HTML5，也可向IT交流代码。主要内容是详细介绍HTML5更新内容，代码应用
2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言...
### 4. 网页编辑工具的选择与使用 - **编辑器**: 如Dreamweaver、HBuilder、Vscode、Sublime Text、WebStorm、Notepad++等，不同的编辑器适合不同层次的需求。 - **代码调试**: 编辑器通常都提供了代码高亮、语法...
大学生静态网页设计期末作业川剧介绍的静态网页HTML源码带简单交互效果（必过） 一个关于川剧介绍的静态HTML网页，有着一些简单的交互效果,95分以上没问题啊，大作业必过，课程设计必过！ 大学生静态网页设计期末...
【标题】：“基于HTML5的Web前端设计（旅游景点介绍）” HTML5是现代Web开发的核心，它在传统的HTML4基础上引入了许多新特性，增强了网页的交互性和动态性。在这个项目中，我们主要关注如何利用HTML5进行网页设计，...
【旅游景区介绍网站html整站】是一个完整的网页设计项目，它专为展示旅游景区信息而构建，包含丰富的内容，可以直接应用于实际的在线平台。这个资源对于那些需要快速搭建旅游类网站的开发者来说非常实用，无需从零...
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互...
<li><a href="jieshao.html">介绍</a></li> <li><a href="jingdian.html">景点</a></li> <li><a href="meishi.html">美食</a></li> <div class="banner"><img src="images/banner_1.jpg"/> <!-- 内容 --> ...
4. **技术栈**：使用了原生HTML+CSS+JS技术，没有依赖任何第三方框架或库，这有助于学生掌握基础知识。 5. **工具支持**：网站代码可以使用多种HTML编辑器进行编辑，比如Dreamweaver、HBuilder、Vscode、Sublime ...
【HTML 介绍1】 HTML（HyperText Markup Language）是网页制作的基础，它是互联网上应用最广泛的语言，用于创建和设计网页。HTML 不仅仅是一种编程语言，而是一种标记语言，它通过一系列特定的标签来描述文档内容和...
在本项目中，“自我介绍html+js.zip”是一个包含HTML、CSS、JavaScript代码的压缩包，主要用于创建一个具有交互性的自我介绍页面。开发者利用jQuery插件Animation来增强用户体验，特别是表单提交功能，使得用户与...