事件 :

ng-click="addNews()"  所属div的层级:    div > div  >span

即,对于

event.target 查找的话最多 从span 触发ng-click="addNews()" 事件
 
即可找到含有 data-id自定义属性的div,现在我们将红色样式border 加在最顶层,这样方便我们操作元素
 
 
不管触发 的标签时哪一个,但是最终都会找到 div(即) 

 所以我们需要继续网上找两级父节点
var rowdiv = div.parentNode.parentNode;

因为我们将

所以我们继续向上找一级并循环此级的子节点(即我们需要增加样式的div组)

在设置当前border为red之前把所有的样式设为默认;然后把当前的div设置为红色。

 

angular 中同级元素交替样式的更多相关文章

  1. chrome中获取元素的样式

    以获取背景颜色为例 html部分 <div id="test">abcd</div> css部分 #test { background-color: rgb ...

  2. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  3. Angular中innerHTML标签的样式不起作用详解

    1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [inner ...

  4. angular 中父元素ng-repeat后子元素ng-click失效

    在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...

  5. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  6. Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

    大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案. 可能大家在引入试过col-md之后觉得bootstrap是ok的, ...

  7. vue 给v-html中的元素设置样式

    解决方案:写样式的时候添加>>>

  8. Jquery点击本身,修改出本身之外的其他同级元素的样式

    1.引用Jquyer库 2.Jquery代码: <script type="text/javascript"> $(function () { slidColor('d ...

  9. 12.2.1 访问元素的样式【JavaScript高级程序设计第三版】

    任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性.这个style 对象是CSSStyleDeclaration 的实例,包含着通过HTML 的style ...

随机推荐

  1. Django:(05)类视图,装饰器和中间件

    一.类视图的定义和使用 在Django中还可以通过类来定义一个视图,称为类视图. 定义一个类视图:定义一个类,需继承 Django 提供的 View 类 . from django.views.gen ...

  2. freeRTOS学习一

    freeRTOS中的链表结构: /* * Definition of the only type of object that a list can contain. 链表中的节点 */ struct ...

  3. jQuery 虚拟数字键盘代码

    先上效果:    js直接应用:  $('input').mynumkb(); 就出来效果 HTML: <input maxlength="4" type="tex ...

  4. Python全栈开发之7、面向对象编程进阶-类属性和方法、异常处理和反射

    一.类的属性 1.@property属性 作用就是通过@property把一个方法变成一个静态属性 class Room: def __init__(self,name,length,width,he ...

  5. Eclipse中 coverage as 测试代码覆盖率

    eclipse 版本: Version: 2019-06 (4.12.0)Build id: 20190614-1200 绿色:代码被执行过黄色:代码部分被执行过红色:代码没有被执行过 引用: htt ...

  6. Linux 防火墙设置常用指令

    查看防火墙状态命令: service firewalld status systemctl status firewalld 结果: 其中:   enabled:开机启动(开机不启动是disabled ...

  7. ABC044 Digit Sum

    题目链接 我的思路略复杂,这里介绍一个比较简洁的做法. 对于 $b \le \sqrt{N}$,暴力枚举 $b$.对于 $b > \sqrt{N}$, 注意到在 $b$ 进制下 $N$ 至多有 ...

  8. Spring系列三:IoC 与 DI

    水晶帘动微风起,满架蔷薇一院香. 概述 在软件工程中,控制反转(IoC)是一种设计思想,对象之间耦合在一起,在运行时自动绑定,并且它们编译时对所需要引用的对象是不确定的.在这个spring教程中,通过 ...

  9. 怎样查看或修改html的绝对路径

    查看用 Node.prototype.baseURI, 修改用 <base>; document.baseURI; // https://www.cnblogs.com/aisowe // ...

  10. Digester库

    在之前所学习关于启动简单的Tomcat部分实现的代码中,我们使用一个启动类Bootstrap类 来实例化连接器.servlet容器.wrapper实例.和其他组件,然后调用各个对象的set方法将他们关 ...