javascript学习实录之五（节点操作）

ruby小酱

于 2015-05-03 09:49:56 发布

阅读量205

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/raosheng1993/article/details/45456997

版权

javascript 专栏收录该内容

96 篇文章 0 订阅

订阅专栏

首先上个简单的代码，关于改变一段文本颜色的代码，很简单，注释也可以看，也是办法，只是我注了

[html] view plain copy

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title></title>
<script type="text/javascript">
function change(classname) {
var divObj = document.getElementById("chaa");
// divObj.style.fontSize = "20px";
// divObj.style.backgroundColor = "red";
alert("str : " + classname);
divObj.className = classname;
}
</script>
<style type="text/css">
.maxx {
background-color: blue;
font-size: 40px;
}
.minn {
background-color: white;
font-size: 8px;
}
.norm {
background-color: green;
font-size: 16px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="change('maxx')">上</a> <br><br>
<a href="javascript:void(0)" onclick="change('norm')">中</a> <br><br>
<a href="javascript:void(0)" onclick="change('minn')">下</a> <br><br>
<div id="chaa" class="norm">
好玩易用掌上美图工具 <br>
获取Root权限，深度管理手机 <br>
支持语音指令、搜索、对话 <br>
</div>
</body>
</html>

可以使用style对象，然后调用里面的属性来改变，也可以写css 然后改变div的class名称，改变样式。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ruby小酱

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript HTML DOM元素节点操作汇总

10-16

JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。首先，理解...

js实现撤销恢复_Dom节点变动检测并录制的简单实现

weixin_39731107的博客

11-28

646

点击上方蓝字关注我们关键技术MutationObserverMutationObserver使用来监测某个范围内DOM的变动，如节点的增减、属性的变动，文本节点的变化等。相当于DOM的改变就会触发MutationObserver这个事件，但是这个事件是异步触发的，会把DOM的变动封装成一个数组进行统一更新的，这点和react中的setState非常相像。构造函数var observer ...

参与评论您还未登录，请先登录后发表或查看评论

JavaScript学习笔记之DOM操作实例分析

10-17

JavaScript DOM操作是Web开发中的核心技能之一，它允许开发者通过编程方式访问和修改HTML或XML文档的结构、样式和内容。DOM（Document Object Model）是一个树状结构，将网页内容组织成一系列相互关联的节点。一、...

JavaScript节点及列表操作实例小结

10-23

在学习JavaScript时，节点及列表操作是前端开发中的一个重要部分，它允许开发者通过编程方式动态地操作DOM（文档对象模型）。本文以实例的形式详细总结了JavaScript节点及列表操作的方法，并展示了创建、添加、移除...

JavaScript学习笔记之DOM基础操作实例小结

12-08

在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括子节点、节点类型、元素节点以及父节点的处理。一、子节点操作 1. 获取子节点数量在实例01中，我们通过`childNodes.length`获取了`<ul id="ul1">`元素...

纯JavaScript操作DOM节点

最新发布

05-22

纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...

JS基础——getElementsByTagName获取元素

05-01

2395

[html] view plaincopy body> ul id="list"> span style="white-space:pre"> span>li>li> span style="white-space:pre"> span>li>li> span style="white-space:pre"> span>li>li> ul> body>

window.location.href,window.location.replace(),window.location.reload() 三者的区别

04-30

2255

总是在资料上看到 window.location.href和window.location.replace的区别，但是不是很明白，今天彻底明白了。简单说说：有3个jsp页面（1.jsp, 2.jsp, 3.jsp），进系统默认的是1.jsp ，当我进入2.jsp的时候， 2.jsp里面用window.location.replace("3.jsp");与用window.location.hre

JS基础——两张图来回切换

05-01

1024

[html] view plaincopy > html> head> meta charset="utf-8"> title>JS基础——两张图来回切换title> script> window.onload = function(){ var oImg = document.getElementById('img'); var onOff = tr

JS基础——多张图片循环切换

05-01

980

[html] view plaincopy > html> head> meta charset="utf-8"> title>JS基础——多张图片循环切换title> script> window.onload = function(){ var oImg = document.getElementById('img'); var arr = ['i

Div 自适应屏幕大小

05-01

976

js Background 有时，我们需要将div或者其他的Element 自适应屏幕，窗口以及浏览器 , 这样会提高页面美观，提升用户体验，只是个小问题，但是它用到的知识还是可以吸收一下。 Knowledge prepared 这里准备下我们所要了解的一些size属性，有助于我们设置自己需要的大小。 de

javascript scrollTo() 函数按像素滚动窗体

04-30

917

javascript scrollTo() 函数按像素滚动窗体 JavaScript scrollTo() 函数 scrollTo -- 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置 scrollTo，中文"滚动到"引用网址：http://www.dreamdu.com/javascript/w

一些简单的特效鼠标悬停鼠标移动和图标特效

05-03

771

鼠标悬停 http://www.iteye.com/topic/1137162 鼠标经过 http://www.w2bc.com/Article/19556 图标特效 http://www.w2bc.com/demo/2015-02-04-IconHoverEffects/index.html

js 刷新页面window.location.reload();

04-30

749

Javascript刷新页面的几种方法： 1 history.go(0) 2 window.location.reload() window.location.reload(true) 3 location=location 4 location.assign(location) 5 document.execCommand(''Refresh'') 6

JS基础——索引值的应用

05-01

726

[html] view plaincopy > html> head> meta charset="utf-8"> title>JS基础——索引值的应用title> script> window.onload = function(){ var aBtn = document.getElementsByTagName('input'); var arr

ResponsiveSlides javascript 幻灯片插件

05-03

673

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。第一步：添加链接 [javascript] view p

JSCalendar 日历控件

04-30

589

目录(?)[+] JSCalendar 日历控件 1. K 可以自己换皮肤，有好几套，可以设置日期时间格式==，下面地址可以下载 1. 概述日历控件我们使用dynarch的JSCalendar: http://www.dynarch.com/projects/calendar/ 下载包中有完整的sample 和文档。 1.1 S

《js动画效果》之透明度动画

05-01

586

js 学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167。例子：初始透明度值为30，鼠标移上改变物体的透明度到100，鼠标移出模块区域将透明度由100变为30 刚开始我没想通为什么要那么复杂将其也用定时器来实现，鼠标移上时，直接将透明度的值设为100，移出时设为30就好了呀。后来比较了两种做法（采用定时器和不采用定时器）我才发现，我忽略了一个重

x-webkit-speech 输入框中添加“小话筒”

04-30

556

使用语音输入作用有： 1.提供除了键盘和鼠标的另一个输入方法，针对pc用户，当键盘不可用时也可以使用语音输入。 2.为手机用户提供更加方便的输入方法。 lang 这玩意可以强制输入框里面的语音的语言种类，例如 1.支持的浏览器 x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。实现

深入理解JavaScript DOMDocument对象与节点操作

1. **Attributes** - 这个只读属性存储了节点的所有属性，你可以通过它来访问和操作节点的属性。 2. **childNodes** - 这个只读属性包含了一个NodeList，列出了节点的所有子节点，可用于遍历和操作子节点。 3. **...

javascript学习实录 之五（节点操作）

javascript学习实录之五（节点操作）