第05章 基础 DOM 和 CSS 操作（下）

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量91 收藏
点赞数
分类专栏： 阅-JQ 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17658/article/details/82636935
版权

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础 DOM 和 CSS 操作</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div title="demo" style="width:200px; padding:100px; border:100px solid #ccc; margin:100px;">
	<strong>http://onestopweb.cn/</strong>
</div>
-->
<div title="demo" style=" position:relative;">
	<strong style="position:absolute; top:1px">http://onestopweb.cn/</strong>
</div>
<div title="demo">
	<strong>http://onestopweb.cn/</strong>
</div>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>
</html>

 

style.css

.red{ color:red;}
.green{ color:green;}
.bg{ background-color:#ccc;}
.size{ font-size:20px;}

 

demo.js

$(function(){
	//alert(typeof parseInt($('div').css('width')));
	//alert(typeof $('div').width());
	//alert($('div').width());
	//alert($(window).width());
	//alert($(document).width());
	//$('div').width(500);
	//$('div').width('500pt');
	/*
	$('div').width(function(index,width){
		return width - 500 + 'px';//虽然可以不加，会智能添加，但还是建议加上单位，这样会更加清晰。
	});
	
	//alert($('div').height());		//padding,border,margin
	alert($('div').width());		//200 200 200
	alert($('div').innerWidth());	//400 400 400
	alert($('div').outerWidth());	//400 600 600
	alert($('div').outerWidth(true));//400 600 800
	*/
	//alert($('div').offset().top);
	//alert($('strong').offset().top);
	
	//alert($('div').position().top);
	//alert($('strong').offset().top);
	//alert($('strong').position().top);
	
	alert($(window).scrollTop(300));
});

 

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第05章 基础 DOM 和 CSS 操作（中）
08-11
在本章“第05章 基础 DOM 和 CSS 操作（中）”中，我们将深入探讨Web开发中的核心概念——Document Object Model (DOM) 和 Cascading Style Sheets (CSS) 的基本操作。DOM是HTML和XML文档的编程接口，而CSS则是用于...
a毛 jquery 学习记 5 基础DOM和CSS操作3
pymxb1991的专栏
04-18 467
jquery 学习 五(3) 基础DOM和CSS操作 参考资料：李炎恢老师的视频 、w3cschool  、锋利的jquery、 拷上次笔记到文件夹到'5基础DOM和CSS操作3'中， 五．CSS 方法 先了解一下如下表： $(function(){     alert($('div').css('width')); //上节课想要获取DI元素宽度
Jquery基础DOM和css操作
lcn_Lynn的博客
09-03 576
Jquery 第 5 章 章  基础 DOM 和 和 CSS  操作 学习要点： 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我 们开发的
css dom名称,jQuery DOM/属性/CSS操作
weixin_32762235的博客
08-04 128
jQuery DOM 操作创建元素只需要把DOM字符串传入$方法即可返回一个 jQuery 对象var obj = $('Done')添加元素.append()在a 标签里面添加内容是b的p标签$( "a" ).append( "b" )其他例子$( ".inner" ).append( "Test" )$( "p" ).append( "Hello" )$( "p" ).append( $( ...
jQuery中的DOM和CSS操作
depers15的博客
07-14 1287
jQuery中的DOM和CSS操作DOM ，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在JavaScript 中，DOM 不但内容庞大繁杂，而且开发的过程中需要考虑更多的兼容性、扩展性。在jQuery 中，已经将最常用的DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。一．DOM 简介1.D 表示的是页面文档Document、O 表示对象，即一组含有独立特性
a毛 jquery 学习记 5 基础DOM和CSS操作2
pymxb1991的专栏
04-17 344
jquery 学习 五(2) 基础DOM和CSS操作 参考资料：李炎恢老师的视频 、w3cschool  、锋利的jquery、 拷上次笔记到文件夹到'5基础DOM和CSS操作2'中， 四．元素样式操作 css(); $(function(){ alert($('div').css('color')) //获取div内的css样式的颜色 $('div').css('colo
a毛 jquery 学习记 5 基础DOM和CSS操作1
pymxb1991的专栏
04-17 617
jquery 学习 五(1) 基础DOM和CSS操作 参考资料：李炎恢老师的视频 、w3cschool  、锋利的jquery、 拷上次笔记到文件夹到'5基础DOM和CSS操作1'中， 一．DOM 简介 由于课程是基于 JavaScript 基础上完成的， 这里我们不去详细的了解 DOM 到底是什么。只需要知道几个基本概念： 1.D 表示的是页面文档 Document、O 表示对象，
原生JS DOM 重点知识笔记（第五期-CSS DOM）
奔跑的面条博客
03-21 163
一、CSS DOM操作 获取一个内联样式,下面会输出：grey <p style="color:grey" id="para"> 这里是内容 </p> <script> var para=document.getElementById("para"); alert(para.style.color); </script> 主动设置一个内...
第一部分 JavaScript、CSS与DOM基础篇
bachuannie8771的博客
02-24 125
第一章 JS概述 第二章 js基础 第三章 Css基础 第四章 CSS进阶 第五章 DOM模型 转载于:https://www.cnblogs.com/Beyron/archive/2013/02/24/2924696.html
5.jQuery 基础DOM 和CSS 操作
Save you from anything
08-01 2305
DOM 在JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在JavaScript 中，DOM 不但内容庞大繁杂，而且我 们开发的过程中需要考虑更多的兼容性、扩展性。在jQuery 中，已经将最常用的DOM 操 作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
Dom编程艺术第五章
王明海的专栏
09-04 291
本章节练习代码下载：Dom编程艺术第五章最终代码1、网站的访问者完全有可能使用的是不支持JavaScript的浏览器，或者是用户已经禁用JavaScript（禁止广告弹窗）,如果正确地使用JavaScript脚本，就可以让访问者在他们的浏览器不支持的情况下仍能顺利地浏览你的网站。2、在给内容加上各种标记后，就可以使用各种CSS指令控制内容的显示效果。CSS指令构成了一个表示层。这个表示层就像是一张透
第05章 基础 DOM 和 CSS 操作（上）
08-11
在本章中，我们将深入探讨基础的DOM（Document Object Model）和CSS操作，这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript或其他编程语言来动态地改变网页内容。而CSS则是样式表...
第5章 DOM和CSS操作
12-02
### 第5章 DOM和CSS操作 #### 一、DOM简介 文档对象模型（Document Object Model，简称DOM）是一种被广泛使用的编程接口，用于处理HTML、XML等文档结构。DOM允许程序和脚本动态地访问和更新文档的内容、结构以及...
第06章 DOM节点操作（下）
08-11
在本章中，我们将深入探讨DOM（文档对象模型）节点操作的下半部分。DOM是HTML和XML文档的编程接口，允许我们通过JavaScript等脚本语言动态地修改、添加或删除网页内容。DOM节点操作是前端开发中的核心技能，对创建...
web前端基础面试85题（一）
柯晓楠
07-18 1163
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 80
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
HTML、XHTML与CSS入门教程：第二版英文版
第五章"Forms"是关于表单元素和表单处理的，包括输入字段、按钮、选择菜单等，以及如何使用动作和方法属性提交数据。第六章"Frames"介绍了如何使用框架来组织多个独立浏览区域。 CSS是本书的重点之一。第七章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值