事件 :

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. 【HANA系列】对话SAP全球CEO孟鼎铭:未来最大的发展机遇属于中国中小企业

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]对话SAP全球CEO孟鼎铭:未来 ...

  2. dockerfile文件命令详解

    Dockerfile 一般分为四部分:基础镜像信息.维护者信息.镜像操作指令和容器启动时执行指令,’#’ 为 Dockerfile 中的注释: Dockerfile的指令根据作用可以分为两种:构建指令 ...

  3. 什么是MapReduce?

    [学习笔记] 什么是MapReduce?马 克-to-win @ 马克java社区:1)MapReduce是面向大数据并行程序设计的模型和方法,这一点很像我们前面讲的MVC,MVC解决动态网站问题而 ...

  4. 【FFMPEG】ffmpeg 时间戳问题汇总

    ffmpeg 时间戳问题汇总 http://www.cnblogs.com/loveclover/archive/2011/03/23/1993065.html 问题是这样的 用一个 VLC(流媒体客 ...

  5. 关于c调用lua 对‘luaL_newstate()’未定义的引用的问题解决办法

    #include <string.h>#include "lua.h"#include "lauxlib.h"#include "lual ...

  6. 第十三章 字符串(一)之 String

    这一节来学习String的特性和方法. 一.String对象的不变性 不变性:String对象是由一个final char[] value 数组实现的,因此String对象是不可变的.任何看起来改变S ...

  7. Atomic long 和long的区别

    Atomic long 和long: 前者是一个对象,包含对象头(object header)以用来保存hashcode.lock等信息,32位系统占用8个字节,64位系统占16个字节,所以在64位系 ...

  8. curl put方式上传文件

    发送端 <?php function curlPut($destUrl, $sourceFileDir, $headerArr = array(), $timeout = 10) { $ch = ...

  9. PHP读取xml并写入数据库示例

    <?php $xml = simplexml_load_file('books.xml'); // print_r($xml); // echo "<br/>"; ...

  10. Python 3.8.0 正式版发布,新特性初体验 全面介绍

    Python 3.8.0 正式版发布,新特性初体验 北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PE ...