开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >在角HTML中使用id="mydiv“和#mydiv有什么区别？

问在角HTML中使用id="mydiv“和#mydiv有什么区别？
EN

Stack Overflow用户

提问于 2019-02-11 07:32:49

回答 3查看 6.2K关注 0票数 10

这是一个简单的角度HTML问题，我想对标签的id稍微清楚一点。例如，在我的代码中：

    <input class="inputfile" type="file" name="file" #file id="file" 
    (change)="onFileChange($event)"/>

    <button mat-mini-fab color="primary" (click)="file.click()">                        
            <mat-icon aria-label="Icon to upload file">cloud_upload</mat-icon>
    </button>

    <label for="file" >Upload your portifolio</label>

在该示例中，我必须在输入中设置#file id="file" 以使按钮正常工作，还必须为标签设置以便工作。以前我以为他们有相同的函数，只是语法而已。有人能澄清每一种方法的用途吗？

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-02-11 07:58:19

如果您想使用javascript函数或从使用getElementByID的控制器中标识一个元素，或者要指向样式表中的样式，则需要在整个DOM中设置必须是该元素唯一的id。

但是，当您想要访问DOM文件中的元素时，需要使用#引用该元素。如果只使用id，浏览器中就会出现错误Cannot read property 'XXX' of undefined。

例如，为了使用DOM文件中输入的值来显示/隐藏按钮，而无需编写任何javascript/角代码，您可以执行如下操作，其中设置id是行不通的。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #nameField matInput placeholder="Name">
  </mat-form-field>

  <button type="button" *ngIf="nameField.value!==''" >Submit</button>
</form>

引用这来处理用户输入和这，作为对#标记的更广泛解释。

票数 6

EN

Stack Overflow用户

发布于 2019-02-11 08:22:09

在角度应用程序中，#mydiv可以根据上下文的不同而具有不同的功能。

在DOM元素上，<div #mydiv>是对元素的引用
对角分量的引用
在定义exportas:"ngform"的一个元素上，#mydiv="ngForm"创建一个组件引用，该元素是一个角分量，或者有一个角指令。

票数 2

EN

Stack Overflow用户

发布于 2019-02-11 07:42:44

用于为元素分配唯一标记的html中的id (稍后可由javascript使用)。#在html中用作此元素的标记(如指向该元素的链接)。示例:您已经按下按钮和浏览器滚动到标记为#file的元素。

票数 -2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54633959

复制

相关文章

HTML 和 HTML5 有什么区别？

原文链接：https://note.noxussj.top/?source=cloudtencent HTML5 介绍什么是 HTML5 ？ HTML5 将成为 HTML 、XHTML 以及 HTM

前端菜园

2023/04/07

1.3K0

1.概述 1.1DOM DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理

小胖

2018/06/27

1.9K0

Web前端基础（05）

html 编程算法 javascript java

####溢出设置overflow visible(默认) 超出范围显示 hidden 超出范围不显示 scroll 超出范围滚动显示 ###JavaScript 作用:给页面添加动态效果和Java没有任何关系,只是为了蹭热度语言特点: 属于脚本语言,不需要编译直接解析执行基于面向对象属于弱类型语言 int x = 10; String s = “abc”; 弱类型 var x = 10; var s = “abc”; 安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的

海拥

2021/08/23

1.6K0

【点滴】在 promise 中 then 和 finally 有什么区别

javascript node.js

看上去 promise.prototype.then() 和 promise.prototype.finally 似乎非常相似。但是你需要明白它们有一些重要的差异。

疯狂的技术宅

2021/04/01

2.4K0

Android查缺补漏（View篇）--布局文件中的“@+id”和“@id”有什么区别？

但需要注意的是在布局文件中，被引用的id要在引用位置的上面，否则会编译出错，如下：

codingblock

2018/07/31

8880

Android查缺补漏（View篇）--布局文件中的“@+id”和“@id”有什么区别？

Android布局文件中的“@+id”和“@id”有什么区别？ +id表示为控件指定一个id（新增一个id），如： <cn.codingblock.view.customer_view.MyView android:id="@+id/myview" ... /> id表示引用一个现有的id，如: <cn.codingblock.view.customer_view.MyView android:id="@+id/myview"

codingblock

2018/03/30

1.1K0

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— style、currentStyle、getComputedStyle区别介绍 style、currentStyle、getComputedStyle区别介绍样式表有三种方式内嵌样式（inline Style）：是写在Tag里面的，内嵌样式只对所有的Tag有效。

IMWeb前端团队

2019/12/05

1.1K0

JS中innerHTML、outerHTML、innerText、outerText的用法与区别

html java https http 网络安全

PS: innerHTML是符合W3C标准的属性，而innerText对Firefox是不支持的，因此，尽可能地去使用innerHTML，

全栈程序员站长

2022/07/04

1.2K0

【JQuery框架】超详细DOM操作看这一篇就够了！

网站 sql jquery 编程算法

之前和大家分享了jQuery框架中选择器的相关操作“【JQuery框架】五大选择器“全家桶”详解！！！”

灰小猿

2021/09/14

5470

理解Vue中的组件化开发

javascript vue.js

主要从ui界面上进行划分。例如前端的组件化，方便ui组件的调用。类似于以前的导航栏。

代码天才TTT

2023/08/01

6410

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5 教程，主要介绍了 style、currentStyle、getComputedStyle 三者的区别。style 是内联样式，只能应用于单个元素；currentStyle 是元素的运行时样式，可以应用于同一个文档中的多个元素；getComputedStyle 是获取元素样式信息的函数，可以获取指定元素的所有样式信息。

IMWeb前端团队

2017/12/29

7420

HTML第二课——css【2】

稍稍一偷懒，就有近一个星期没有更新了，? 大家五一快乐哈现在继续上一节课的内容，看下面代码： <!DOCTYPE html> <html> <head> <meta charset="utf

孟船长

2018/05/21

5440

vue.js style（核心）

json class 数组字符串

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src='vue.min.js'></script> <titl

贵哥的编程之路

2021/03/02

2.4K0

vue.js style（核心）

jQuery获取data-*属性值

http://www.cnblogs.com/lzijian/p/6322868.html

kirin

2020/12/17

2.8K0

jQuery获取data-*属性值

JS引发页面重排重绘的代价

示例目标是修改div内容，3种实现方式，看下每种方式的执行时间 <html> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> <div id="myDiv3"></div> <script> var times = 10000; // 方式1 console.time(1); for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a'

dys

2018/04/02

1.2K0

Web前端开发JavaScript提高

JS是基于对象的(Object-Based)脚本语言,而不是面向对象(Object-Oriented)中所使用的那个对象,之所以说JS是一门基于对象的编程语言,是因为它没有提供抽象,继承,封装等面向对象语言的很多功能,而是把其他语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统.

微软技术分享

2022/12/28

2.3K0

JavaScript 前端笔记总结(精简)

编程算法 jquery javascript

JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,现在随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.

微软技术分享

2022/12/28

7.6K0

JQuery碎碎念

1 JQuery最佳实践 1.1 使用JQuery的ready处理器 $(function () { /* 你的代码 */ }); //或者 $(document).ready(function () { /* 你的代码 */ }); 1.2 用noConflict()避免冲突并定义别名 $jq = jQuery.noConflict(); $jq(function () { /* 你的代码 */ } 1.3 缓存JQuery对象及链式调用 1.3.1 错误的方式 //错误

IT架构圈

2018/06/01

5.7K0

十、Vue.js的Class绑定

https 网络安全 vue.js ide 编程算法

十、Vue.js的Class绑定

Java架构师必看

2021/05/14

4.3K0

html 编程算法 css

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。

RiemannHypothesis

2022/10/31

1.6K0

相似问题

$('.mydiv').children().last()和$('.mydiv').last()之间的差异

42

设置$(".mydiv").myFunction()；

11

如果body有这个类，则将此内容放在#mydiv中，否则将其他内容放在#mydiv中

21

jQuery $('#mydiv').css('top'，'500')；不工作

110

在这种情况下，$(“#myDiv”).html(MyResult)有什么更好的替代方案？

13

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例