妙味js视频学习之旅（二）

最新推荐文章于 2025-09-05 14:01:23 发布

原创最新推荐文章于 2025-09-05 14:01:23 发布 · 522 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

本文介绍了JavaScript中HTML属性的操作方法，包括读取和替换属性值，并探讨了innerHTML的使用方式。此外，还讨论了在JavaScript中进行属性操作时需要注意的问题，以及如何使用数组来实现图片切换等效果。

1-属性操作

01、HTML的属性操作

HTML属性就是每个标签的id src class type这些。
属性操作就是两种：读操作和写操作（其实是替换的意思，不是添加）

元素.属性//这是读操作，获取、得到我们想要的
元素.属性=新的值；//这是写操作，是替换

还有一个innerHTML,这个是所有内容包括标签。

元素.innerHTML;//获取得到元素内的值。
元素.innerHTML=新的值;//设置元素内的内容。

通过这两个的配合，可以做出一些效果，可以实现聊天添加，或者把输入文本框的值动态设置为某个元素的属性值，比如src,可以实现点击换图片的效果，等等操作。

02属性操作的注意事项

技术上：必须能掌握兼容性，
项目上：商量着；
1：js中不允许使用“-”符号，因此所有的css属性中带有“-”的一律去掉“-”把后面字母的首字母改为大写，如

font-size==>fontSize;

2:由于js中含有关键字或者保留字，所以其它字符串不能使用，比如class是保留字，因此给class设置属性时，要把class改为className.还有float

oP.className="red";
oP.style.styleFloat='left';(IE)
oP.style.cssFloat='right';(非IE)

3:相对路径不能判断，颜色值也不能拿来做判断,innerHTML值也不要

img src;href "css/index.css"
color:red #f00 rgb(250,0,0)

4：修改type值IE678不兼容；

原来type="button";
o.type="cheakbox";//想兼容的话，就是点击隐藏，把cheakbox显示，模拟显示

5：js中可以把”.”换成[]。这两个是完全等价的。实现替换比如

oAttr.value;//属性名
oVal.value;//属性值
oDiv.style.width=oVal.value;//这样可以，
oDiv.style.oVal.value=oVal.value;//但是这样不可以
oDiv.style[oVal.value]=oVal.value;//这样是可以的

03判断

if判断有三种形式

if(){};
if(){}else{};
if(){}else if(){}else if(){};

基于这个我们可以做一个模拟开关，用于循环切换。类似于toggle

var onOff=true;//一般的话在外部定义全局变量，然后再在内部进行变化
if(onOff){//算法的魅力
  元素显示;
  onOff=flase;
}else{
  元素隐藏;
  onOff=true;
}

04数组

数组可以理解为一个仓库；下标从0开始。最后一个是arr.length-1

var arr=[元素一，元素二，元素三，元素四]//最后一个一定不要再加，否则真实数量会再多一个。
arr.push()//向数组最后面添加内容

使用数组可以制作点击图片切换等等的效果原理大致如下，

style.css//设置好样式
oPrev,oNext,oImg,oText,oTotalNum,//获取元素,
oImages=[图片地址一，图片地址二，图片地址三]//设置好图片地址
oDescription=[图片说明一，图片说明二，图片说明三]//设置好图片说明，
var num=0;//定义好计数
//初始化设置函数init()
//把图片地址给src,把图片说明给oText,把图片地址数组的length给oTotalNum
下一个点击事件
oNext.onclick=function(){
    num++;
    if(num==oImages.length){num=0;}//到头了就返回到第一个
    init();//图片设置函数
}
上一个点击事件
oPrev.onclick=function(){
    num--;
    if(num==-1){num=oImages.length-1;}//到头了就返回到第一个
    init();//图片设置函数
}

这里给出实例