自定义html的attributes

本代码来自Coursera的Angular课程,欢迎大家去参加课程.我节选出精华的片段,写到自己博客上.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 Custom Attributes</title>
  </head>
  <body>
    <h1>HTML5 Custom Attributes</h1>

    <div id="target" ng-app="myTestApp">
      <section>Section 1
        <article>Article 1</article>
      </section>
    </div>
    <script>
    // var elem = document.getElementById(‘target‘);
    // console.log(elem);
    //
    // console.log(elem.getAttribute(‘ng-app‘));
    var elem2 = document.querySelector("[ng-app]");
    console.log(elem2);
    console.log(elem2.getAttribute(‘ng-app‘));
    </script>
  </body>
</html>

自定义的attribute,html解释器在解释时会自动忽略,因此不会破坏html的运行.

Javascript自带了访问自定义attribute的函数,document.getAttribute(),这可以得到该attribute的值.

此外,还可以通过document.querySelector("[name]")获得有该attribute的dom树的分支.

时间: 2024-08-02 13:40:58

自定义html的attributes的相关文章

iOS9UICollectionView自定义布局modifying attributes returned by UICollectionViewFlowLayout without copying them

UICollectionViewFlowLayout has cached frame mismatch This is likely occurring because the flow layout subclass MyLineLayout is modifying attributes returned by UICollectionViewFlowLayout without copying them - (NSArray *)layoutAttributesForElementsIn

.Net 中的反射(反射特性) - Part.3

反射特性(Attribute) 可能很多人还不了解特性,所以我们先了解一下什么是特性.想想看如果有一个消息系统,它存在这样一个方法,用来将一则短消息发送给某人: // title: 标题:author:作者;content:内容:receiverId:接受者Id public bool SendMsg(string title, string author, string content, int receiverId){     // Do Send Action } 我们很快就发现这样将参数

转:.Net 中的反射(反射特性) - Part.3

.Net 中的反射(反射特性) - Part.3 反射特性(Attribute) 可能很多人还不了解特性,所以我们先了解一下什么是特性.想想看如果有一个消息系统,它存在这样一个方法,用来将一则短消息发送给某人: // title: 标题:author:作者;content:内容:receiverId:接受者Idpublic bool SendMsg(string title, string author, string content, int receiverId){    // Do Sen

Spring Boot 2 Webflux的全局异常处理

https://www.jianshu.com/p/6f631f3e00b9 本文首先将会回顾Spring 5之前的SpringMVC异常处理机制,然后主要讲解Spring Boot 2 Webflux的全局异常处理机制. SpringMVC的异常处理 Spring 统一异常处理有 3 种方式,分别为: 使用 @ExceptionHandler 注解 实现 HandlerExceptionResolver 接口 使用 @controlleradvice 注解 使用@ExceptionHandle

.Net:自定义特性(Custom Attributes)的创建与查看

有时候,我们会看到这样的东西放在类或者方法上面: [Obsolete("请更新方法")] 刚开始的时候,还自己给它起了个名字--小标签,比如,平常会说:你数据契约是不是没打标签啊!~嘿嘿~ 后来跟代码发现了更多的不认识的自定义标签.那么,这些标签是怎么定义和使用的呢? 定义Attribute 如下,定义了一个用于记录类变更的attribute,不允许继承,允许多次使用. [AttributeUsage(AttributeTargets.Class, Inherited = false,

THREE.js代码备份——webgl - custom attributes [lines](自定义字体显示、控制字图的各个属性)

<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - custom attributes [lines]</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scal

[Xcode] Attributes Inspector 界面自定义实时渲染属性

在工程里面新建文件 Cocoa Touch Class  模版选对应的 比如 对 ImageView 扩展 就创建UIImageView 这个对应的类可以在 Identity Inspector 里面看默认的类名字 import UIKit @IBDesignable // 添加这个实现StoryBoard实时渲染结果 class addAttributes: UIImageView { @IBInspectable var cornerRadius: CGFloat = 0 { // @IBI

UI_11 自定义UITableViewCell、Cell的高度自适应

UITableViewCell很难满足我们的需求,因此,CustomCell(自定义单元格)至关重要.下面将通过一个例子演示自定义Cell.第二部分演示根据文本内容自适应Label.Cell高度. 第一部分 CustomCell的创建 1.创建DemoTableViewController,继承自UITableViewController,并设置其为window的根视图 AppDelegate.m - (BOOL)application:(UIApplication *)application

Laravel 5.5 的自定义验证对象/类

本文和大家分享的主要是Laravel 5.5 的自定义验证对象/类相关内容,一起来看看吧,希望对大家学习Laravel有所帮助. Laravel 5.5 将提供一个全新的自定义验证规则的对象,以作为原来的 Validator::extend 方法的替代. Laravel 中的表单验证是比较方便的,而且内置了大量的可用验证规则,但不管官方提供了多少,总还是会有满足不了需求的时候.很多时候我们会直接用正则表达式来处理这种特殊的验证,也有时候我们会选择用 Validator::extend来扩展一个自