JS 和 a href

在href里面注意分号结尾, 引号闭合

<a href="javascript:;">空链接</a>

<a href="javascript:alert('a');">弹出</a>

一般不妨代码, 一般让它空着. 空着也可以用井号'#', 但不是很好.

className

<style>

#div1 {width:100px; height:100px; border:1px solid black;}

.box {background:red;}

</style>

<script>

function toRed()

{

    var oDiv=document.getElementById('div1');

    oDiv.className='box';             //不要写成class

}

</script>

</head>

<body>

<input type="button" value="变红" onclick="toRed()" />

<div id="div1">

1. getelementbyId 是和id 相连. 但没有和 class相连的方法.

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

要用JS  根据/创建 className索引样式 . 需要在getelement后再加一个二级属性'.className'.

加了之后本来指定id的标签 不单从'井号'索引针对id的样式, 也同时从'点号'索引针对class的样式.

2. getelement.className = 'box';  引起的变化:                            //上面的例子是oDiv 换一个说法而已一样的.

如果<div>标签里面已经有class=xxx 的属性, 那么事件动作引出函数的时候, class=xxx将会被修改成class=box

如果<div>没有class =xxx , 就会在执行script的时候顺带创建.

回想一下 如果<div> 没有指明的style = XXX,  那么getelement.style.backgroud 也会自动创建

getelement. + style/ class / type / href / value  等等, 想改想加都可以很方便随意了.就怕你不像改

这仅仅是 一种方法.

- 还有getelement ['value'] 这样中括号引号的方式, 和 . (点号) 的带出属性是一样的. 一般不是特殊情况不会使用[' '] 这种方式.

如果[''] 要引用的是某个变量 假设 a ='width', 那么['a'] 就变成 [' ' width ' '] 这样就不符合getelement ['属性'] 这样的概念了.

这时候的处理方法就可以是[a] 就不带引号了!

- 所有的 . 都可以用 [''] 代替

oDiv.className='box';            //下面的是等价的

oDiv['className'] ='box';

多层也可以, oDiv['style']['width'] = '40px'

- 什么时候 需要用['']? 函数传参 一般可以传到值上, 有时候要传到属性名称上代表属性, 这时候就要用到['']

JS嵌入的html运行顺序:

-执行事件动作, 执行指向的JS函数, 函数对指定id标签进行修改.

JS嵌入的html代码编写顺序:

-想好更改什么效果, 标注id/class 到指定效果标签,  使用 .或者# 创建{style}, 调用ID编写变更css的逻辑,  用事件函数触发.

JS 和 a href className JS编写顺序与运行顺序 字符串或变量嵌入中括号 代替 点号 代表属性的更多相关文章

  1. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  2. js改变或添加className

    js改变或添加className <style type="text/css"> .newDiv { font-weight: bold; } </style&g ...

  3. 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合

    站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...

  4. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  5. require.js模块化管理和加载js（按需加载）简单实例教学

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  6. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  7. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  8. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  9. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

随机推荐

  1. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  2. 使用scp命令，远程上传下载文件/文件夹

    1.从服务器下载文件 scp username@servername:/path/filename /local/path例如: scp ubuntu@117.50.20.56:/ygf/data/d ...

  3. nodejs（四） --- cluster模块详解

    什么是cluster模块,为什么需要cluster模块?  cluster在英文中有集.群的意思. nodejs默认是单进程的,但是对于多核的cpu来说, 单进程显然没有充分利用cpu,所以,node ...

  4. redis之 集群配置（主从复制）

    集群的作用: 集群的方式有二种: 第二种的好处是:master宕机以后可以直接切换到slave1 主从通信的过程 先通过dump导出大块的rdb 然后把aof缓冲过来,然后通过replicationf ...

  5. javac的Resolve类解读

    方法1:isInitializer() /** An environment is an "initializer" if it is a constructor or * an ...

  6. Java类文件结构及javac的ClassReader类解读

    首先来看一下ClassFile,类注释如下: A JVM class file. Generic Java classfiles have one additional attribute for c ...

  7. JavaScript设计模式-14.组合模式实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue测试安装和配置

    npm install --save-dev @vue/test-utils mocha mocha-webpack npm install --save-dev jsdom jsdom-global ...

  9. 剑指offer(26-30)编程题

    二叉搜索树与双向链表 字符串的排列 数组中出现次数超过一半的数字 最小的K个数 连续子数组的最大和 26.输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整 ...

  10. Linux网络编程--多线程实现echo服务器与客户端“一对多”功能，是网络编程的“Hello World!”

    在linux平台下,用多线程实现echo服务器与客户端“一对多”(即是一台服务器可以响应多个客户端的请求).本人写了个demo,和大家一起分享,有不足的地方,请多多指教,我是壮壮熊. 编译时,在后面加 ...