dom案例

最新推荐文章于 2023-04-27 19:13:37 发布
最新推荐文章于 2023-04-27 19:13:37 发布
阅读量393 收藏 1
点赞数
文章标签： class xhtml function html 文档 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w19911111/article/details/7307842
版权

   1隔行变色

思路：
 1、定义两种不同的样式
 2、设定好表格的标题行
 3、获取所有的tr
 4、遍历、判断并设定表格背景颜色
    if(i%2==0){…}

<!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>无标题文档</title>
<style>
.k1{height:10px;
border:1px #ooF solid;
width:10px;
margin:2px;
float:right;
cursor:pounter;
}
</style>
<script>
function changeColor(color){
 //改变背景颜色
 document.bgColor=color;
}
function changeSize(size){
//获取div对象
document.getElementById("content").style.fontSize=size+"px";
}
</script>

</head>

<body>
<div class="k1" style="background-color:#F69" οnclick="changeColor('#F69900')"></div>
<div class="k1" style="background-color:#93C" οnclick="changeColor('#93c000')"></div>
<div class="k1" style="background-color:#639" οnclick="changeColor('#639000')"></div>
<span οnclick="changeSize(26)">大</span>
<span οnclick="changeSize(16)">中</span>
<span οnclick="changeSize(6)">小</span>
<hr style="clear:both">
<div id="content">英语四级必过宝典<br>
三长一短，选最短。三短一长，选最长。长短不一，要选B。层次不齐，要选D。以抄为主，以盟为辅。超猛结合，四级必过。
</div>
</body>
</html>

 

WTT
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dom 实例
weixin_34060299的博客
01-18 187
JavaScript的基本语法已经了解了，直接看Dom的相关例子来学习对document的操作。 Dom的原生使用不是太多，一般情况下使用JQuery更加简单，不过Dom的基本方法还是需要了解一下的。例1 请输入关键字栏目知识点：javascript是默认的脚本语言，因此type='text/javascript可有可无；这里绑定了2个事件，onfocus聚焦，onblur 脱离焦点，他们各自调用...
Dom 学习总结及其实例
weixin_33857679的博客
04-23 175
1、   重新导航到指定的地址：navigate("http://www.cnblogs.com/daomul/"); 2、  （1、*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：                 setInterval("alert('hello')",5000); *clearI...
DOM例子
u010919331的博客
08-05 328
5个js原生小例子，主要用到了DOM、字符串、模板字符串、数组去重等等
dom实例
Superman_Qsir的博客
04-20 291
目录 ##拖动效果## ##滚动对象的位置## ##window的滚动## ##指定滚动条滚动到某一个位置## ##固定导航## ##返回顶部## ##触底加载更多## ##二级联动## ##三级联动## 拖动效果 <div class="box"></div> var box = document.querySelector('.box') // 1:在box上
DOM案例
weixin_47075145的博客
07-24 145
因为是window方法，不写window，只写confirm也可以出现的弹框，点击确定就返回true，取消就返回false。Locattion对象的属性href从当前页面跳转到href属性所指的页面。此时，文档中的所有对象都是DOM，并且所有图像和子帧都已完成加载。上面这个图就是window.firm的效果图。......
jquery 操作DOM案例代码分享
10-28
jquery 操作DOM案例，实现图片的显示，需要的朋友可以参考下
Dom案例4.zip
02-18
在这个“Dom案例4.zip”压缩包中，我们可能找到了一个关于DOM操作的示例项目。虽然没有具体的标签信息，但我们可以基于DOM的基本概念和常见应用来探讨相关知识点。 1. DOM结构：DOM将HTML或XML文档视为一棵树形结构...
JavaScript dom操作 趣味案例
最新发布
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
dom编程案例
01-09
张三 沈阳 <grade>89 李四 大连 <grade>97 </exam>
js dom 例子
CobWeb
09-29 207
&lt;html&gt; &lt;head&gt; &lt;title&gt;js dom 动态生成option选项&lt;/title&gt; &lt;script type="text/javascript"&gt; function clearSelect() { var mySelect = document.getElementById('ah'); ...
DOM常见案例大盘点!
blog_pancc的博客
04-27 513
文章目录DOM案例一.DOM操作元素案例1.DOM修改元素内容案例2.分时问候案例3.仿京东显示隐藏密码明文案例4.仿淘宝关闭二维码案例5.遍历精灵图案例6.显示隐藏文本框内容案例7.密码框验证信息案例8.仿世纪佳缘用户名显示隐藏案例9.排他思想(算法)案例10.百度换肤案例11.表格隔行变色案例12.全选反选案例13.tab栏切换案例14.新浪下拉菜单案例15.简单版留言板案例16.动态生成表格案例二.DOM事件高级案例1.鼠标跟随案例2.仿京东按键输入内容案例3.仿京东快递查询单号案例 DOM案例 ​
DOM基础详细 包含多个案例
qq_56303170的博客
08-13 741
DOM基础详细 包含多个案例 DOM基础 详细DOM基础详细 包含多个案例一级目录二级目录三级目录DOM树获取元素如何获取元素根据ID获取根据标签名获取获取特殊元素事件基础操作元素改变元素的内容修改src(其他的类似)根据时间，显示不同的问候语和图片表单元素的修改显示和隐藏密码操作元素的大小、颜色及样式行内样式操作循环精灵图显示隐藏文本框内容使用className修改样式属性密码框验证信息排它思想点击图片修改背景全选和单选自定义属性获取自定义属性设置自定义属性移除属性tab栏切换节点操作节点层级父级节点子级
DOM的6个实例
weixin_40205005的博客
06-15 1511
第1个实例：循环单击变色&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;1111&lt;/h1&gt
DOM操作经典案例
qq_41189709的博客
08-05 1925
DOM操作经典案例百度换肤案例鼠标移进移出变色（行变色）表单全选全取消案例tag导航栏切换案例 百度换肤案例 百度换肤案例就是当你点击一张图片时，当前的背景图片就为你所点击的这张图片，实现起来也比较简单，就是更改一下backgroundImage的url路径 js代码： <script> var img=document.querySelectorAll('img')...
js增删改查（元素）例子
weixin_44944193的博客
11-07 8074
js的dom增删改查例子； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js-dom例子</title> </head> <body> <ul...
常见js dom等原生示例
至尊宝
05-03 1885
js常见dom案例，不难，仅仅记录一下 全选，不选，反选 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var btn1=document.getEleme
DOM操作实例练习
qq_62089165的博客
09-01 960
综合案例-网页轮播图效果案例
JQuery的DOM操作+事例
泠泠似水
02-23 2795
1.DOM节点的创建通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("<div></div>")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("<div>我是文本
DOM 操作元素来改变元素里面的属性（黑马课程总结【侵删】）
qq_42024229的博客
10-08 1140
4. 操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 4.1 改变元素内容 element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行 4.2 常用元素的属性操作 1. innerText、inn...
随便写一个JS DOM案例
03-25
当然可以，以下是一个非常简单的 JavaScript DOM 案例： <!DOCTYPE html> <title>JavaScript DOM Example <h1>JavaScript DOM Example <p id="demo">This is some text. //获取 id 为 demo 的 p ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值