java 线程池 ipv4 Cluster模式 datetime vue教学视频 angularjs视频教程 jq获取元素 art神经网络 oracle查看数据库 mysql升序 mysql自然连接 wps文件修复工具下载 python字典类型 python编程题 python中re模块 python如何定义变量 java字符串 javasocket通信 javafloat java集合转数组 java环境包 java自定义异常 java文件读写 java接口的实例 h5模板 linux格式化命令 rewritebase 视频加字幕软件哪个好 神剪辑教程 mpg格式转换 疯狂java git命令 gunzip python爬虫代码 华为ff 语音分析软件 hyqihei php随机数函数 平原门下客三千 winsxs可以删除吗
当前位置: 首页 > 学习教程  > 

原生js写点击事件改变字体颜色

2020/10/16 18:03:57 文章标签: js原生点击事件

最近一直有想法想把博客和公众号搞起来&#xff0c;但是一直没什么头绪&#xff0c;今天就先简单的给大家带来一个比较基础的原生Js 点击改变元素样式的一个小demo&#xff0c;代码如下&#xff1a; html及css样式&#xff1a; <style> *{margin:0;padding:0;list-styl…

最近一直有想法想把博客和公众号搞起来,但是一直没什么头绪,今天就先简单的给大家带来一个比较基础的原生Js 点击改变元素样式的一个小demo,代码如下:

html及css样式:

<style>

*{
margin:0;
padding:0;
list-style:none;}
li{
float:left;
width:100px;
height:45px;
display:inline-block;
border:1px solid rgb(220,200,210);
text-align:center;
line-height:45px;
box-sizing:border-box;
}
div{
clear:left;
height:200px;
width:298px;
border:1px solid rgb(200,210,220);
text-align:center;
line-height:200px;
}
.color{
color:red;
}
</style>
</head>
<body>
<ul>
<li  class="li">tab1</li>
<li  class="li">tab2</li>
<li  class="li">tab3</li>
</ul>

js部分:

<script type="text/javascript">
var li=document.getElementsByClassName("li");//获取元素的class
for(i=0;i<li.length;i++){
li[i].οnclick=function(){
this.style.color="red";
}
}
 

</script>

如果有什么问题或者建议,也可以关注公众号:1024字节;谢谢!


本文链接: http://www.dtmao.cc/news_show_300366.shtml

附件下载

上一篇:原生js自动触发事件

下一篇:js原生事件

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?