ฉันสามารถเพิ่มแอตทริบิวต์ที่กำหนดเองลงในแท็ก HTML ได้หรือไม่

350

ฉันสามารถเพิ่มแอตทริบิวต์ที่กำหนดเองลงในแท็ก HTML ได้ไหม

<tag myAttri="myVal" />

html custom-attribute

— lovespring
แหล่งที่มา

3

stackoverflow.com/questions/432174/…

— Tamas Czinege

2

และstackoverflow.com/questions/209428/…

— Tamas Czinege

เป็นไปได้ที่ซ้ำกันของแอตทริบิวต์ที่กำหนดเอง - ใช่หรือไม่?

— Ciro Santilli 郝海东冠状病六四事件法轮功

แม้ว่าคำตอบจะบอกว่า "ใช่" แต่ให้แน่ใจว่าคุณมีชุดของคุณลักษณะที่ไม่น่าจะใช้กับปลั๊กอิน เช่น: "data-myuniqueattribute" ฉันมักจะนำหน้าอะไรหลังจาก "data-" ด้วยตัวย่อสองตัวบางประเภท เช่น: "data-yscolumntype" เก็บไว้ที่ไม่ซ้ำกัน

189

คุณสามารถแก้ไขการประกาศ! DOCTYPE (เช่น DTD) ของคุณเพื่ออนุญาตได้ดังนั้นเอกสาร [XML] จะยังคงใช้ได้:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIEDหมายความว่ามันเป็นคุณลักษณะที่เป็นตัวเลือกหรือคุณสามารถใช้#REQUIREDเป็นต้น

ข้อมูลเพิ่มเติมในDTD - แอตทริบิวต์

— carillonator
แหล่งที่มา

2

เพียงแค่ใส่ทุกสิ่งที่อยู่ด้านบนของไฟล์ HTML ของคุณ (สมมติ XHTML 1.0 Transitional เป็น ok)

— carillonator

8

บางทีฉันอาจจะพลาดบางสิ่ง แต่ถ้าคุณทำตามวิธีนี้]> จะปรากฏในหน้าเว็บที่แสดงผล เกิดขึ้นกับฉันใน Firefox 3.6 ตัวอย่างนี้จากalistapart.com/articles/customdtdดูเหมือนว่าจะตรวจสอบพฤติกรรมนี้: "ถ้าคุณดาวน์โหลดไฟล์ตัวอย่างสำหรับบทความนี้และตรวจสอบไฟล์ internal.html คุณจะเห็นสิ่งนี้ด้วยตัวเองโชคไม่ดีเมื่อคุณแสดงไฟล์ในเบราว์เซอร์ ,]> ปรากฏขึ้นบนหน้าจอไม่มีวิธีแก้ไขข้อผิดพลาดนี้ดังนั้นวิธีนี้จึงหมดไป "

— Mike

3

สองสามสิ่งที่สามารถช่วยให้ปรากฏได้ "]>": บันทึกไฟล์ด้วยนามสกุลไฟล์. xhtml ระบุประเภท MIME <meta http-equiv="content-type" content="application/xhtml+xml" />ในไฟล์ที่มี

— LS

4

การประกาศแอ็ตทริบิวต์นั้นไม่มีจุดหมายเท่าที่จะพิจารณาถึงพฤติกรรมของเบราว์เซอร์ พวกเขาไม่ได้อ่าน DTD ยิ่งไปกว่านั้นพวกเขาไม่สามารถข้ามเซ็ตย่อยภายใน (ซึ่งใช้ที่นี่) ได้อย่างถูกต้องซึ่งจะอธิบายถึง“]>” meass การประกาศจะเกี่ยวข้องกับการตรวจสอบความถูกต้องอย่างเป็นทางการเท่านั้นและไม่ควรใช้ในหน้าการผลิต

— Jukka K. Korpela

32

คำตอบนี้ใช้ได้กับ XHTML และ HTML 4.01 ขึ้นไป data-มันสมบูรณ์บอลเฉียงว่าตอนนี้คุณสามารถสร้างแอตทริบิวต์ของคุณเองหากคุณนำหน้าพวกเขาด้วย

— brentonstrine

300

คุณสามารถเพิ่มแอตทริบิวต์ที่กำหนดเองให้กับองค์ประกอบของคุณได้ตามต้องการ แต่นั่นจะทำให้เอกสารของคุณไม่ถูกต้อง

ใน HTML 5 คุณจะมีโอกาสใช้แอตทริบิวต์ข้อมูลแบบกำหนดเองที่data-ขึ้นต้นด้วย

— ต้นกระเจี๊ยบ
แหล่งที่มา

169

จำไว้ว่า "ไม่ถูกต้อง" ไม่มีความหมายอะไรเลย หน้าจะแสดงผลได้ดี 100% ของเวลา

— John Farrell

22

ที่จริง "ไม่ถูกต้อง" มีความหมายในโลกแห่งความเป็นจริงมาก เช่นสามารถใส่เอกสารของคุณลงในการแสดงผล quirksmode ไม่ว่าในกรณีใดก็ตามให้ใช้ HTML5 doctype และคุณจะถูกต้อง

— brentonstrine

มีตารางที่ดีของ doctypes แตกต่างกันและสอดคล้องโหมดเบราว์เซอร์ที่นี่คือhsivonen.fi/doctype/#handling HTML5 doctype จะสลับเบราว์เซอร์ post-2001 ทั้งหมดเข้าสู่โหมดมาตรฐาน (เต็ม) XHTML การเปลี่ยนผ่านและ HTML 4 การเปลี่ยนแปลง (โดยเฉพาะอย่างยิ่งไม่มี DTD) Doctypes ไม่ได้ :)

— Ilya Streltsyn

ศักดิ์สิทธิ์หวานคริสต์ขอบคุณ @jfar ถูกต้อง แต่ลดความสามารถในการอ่าน

— อีกแล้ว

เอกสารของฉันไม่ถูกต้องต่อไปเพราะมันบอกฉัน|ว่าไม่ได้รับอนุญาตใน css hrefแต่นั่นเป็นสิ่งที่จำเป็นสำหรับ Google Fonts

— โพสต์ Self

73

ไม่จะทำให้การตรวจสอบเกิดความเสียหาย

ใน HTML 5 คุณสามารถ / จะสามารถเพิ่มแอตทริบิวต์ที่กำหนดเองได้ บางสิ่งเช่นนี้

<tag data-myAttri="myVal" />

8

แต่ฉันไม่สนใจการตรวจสอบฉันแค่อยากให้มันสามารถเข้าถึงได้โดยจาวาสคริปต์

— 2552

10

มันจะทำงานแน่นอน แต่การสร้างเอกสารที่ไม่ถูกต้องโดยเจตนานั้นไม่ใช่ความคิดที่ดี

31

การสร้างเอกสารที่ไม่ถูกต้องเป็นความคิดที่ดี Google สร้างพวกเขาเพื่อลดเวลาในการโหลดทุกเว็บไซต์ที่ใช้ Canvas ใช้พวกเขาเพื่อสร้างประสบการณ์การใช้งานที่ดีขึ้นและการใช้เฟรมเวิร์กจาวาสคริปต์เพื่อดึงข้อมูลที่มีความหมายออกจากองค์ประกอบ html นั้นทำได้ง่ายกว่ามาก

— John Farrell

3

@jfar: Canvas ไม่ถูกต้อง มันไม่ได้อยู่ใน HTML 4.01; อย่างไรก็ตามเป็นส่วนที่ถูกต้องตามกฎหมายของข้อกำหนด HTML5 ที่กำลังจะมาถึง

— bcat

3

คุณหมายถึง "ไม่ถูกต้อง" หมายความว่าอย่างไร มันไม่ได้เป็นส่วนหนึ่งของข้อกำหนดที่ยอมรับใด ๆ จะมีบางสิ่งที่ใช้ได้กับข้อกำหนดที่ไม่มีอยู่ได้อย่างไร

— John Farrell

34

data()ฟังก์ชันjQuery อนุญาตให้คุณเชื่อมโยงข้อมูลโดยพลการกับองค์ประกอบ DOM นี่คือตัวอย่าง

— Draemon
แหล่งที่มา

1

นี่คือสีทอง

— Trevor Wood

1

@TrevorWood และใช้งานไม่ได้ (ลิงก์)

— Akash Agarwal

23

ใน HTML5: ใช่: ใช้แอตทริบิวต์ DATA-

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

— Andrea Davide
แหล่งที่มา

5

ผู้มีอำนาจที่ดีกว่า: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

— Zuks

11

<html myAttri="myVal"/>ใช่คุณสามารถคุณทำมันในคำถามของตัวเอง:

— luvieere
แหล่งที่มา

2

ขึ้นอยู่กับสิ่งที่คุณกำหนด HTML เป็น ฉันคิดว่า HTML เป็นภาษาที่ใช้ SGML พร้อมชุดองค์ประกอบและคุณลักษณะเฉพาะ XHTML เป็นตัวแปรใน XML โดยมีชุดองค์ประกอบและแอตทริบิวต์เฉพาะที่มีลักษณะเหมือนกับ HTML เมื่อคุณใช้คุณสมบัติของตัวเองมันยังคงเป็น SGML ของ XML แต่ไม่มี HTML ของ XHTML ในความคิดของฉัน

— Douwe Maan

ใช้เป็นส่วนขยายแบบ adhoc ไม่ใช่แบบมาตรฐานในแง่ที่เข้มงวด แต่เป็นการเรียงลำดับของการดำเนินการตามข้อกำหนดที่ไม่ควรแยกวิเคราะห์หากมีแอตทริบิวต์ที่กำหนดเอง

— luvieere

2

DouweM: แน่นอนว่ามี HTML5 เป็นอันดับเสมอซึ่งไม่ใช่ SGML หรือ XML

— bcat

2

และคุณทำลายเอกสารในกระบวนการ ไม่ใช่วิธีปฏิบัติที่ดี

— carillonator

10

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar

<div id="demo" data-myvar="foo">anything</div>

ขยายตัวอย่างข้อมูล

— Jasim Droid
แหล่งที่มา

2

โปรดเพิ่มคำอธิบายสั้น ๆ ให้กับคำตอบของคุณ

— Nikolay Mihaylov

10

ใช่คุณสามารถทำมันได้!

มีHTMLแท็กถัดไป:

<tag key="value"/>

เราสามารถเข้าถึงคุณลักษณะของพวกเขาได้ด้วยJavaScript:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute()วางแอตทริบิวต์ในHTMLแท็กหากไม่มีอยู่ ดังนั้นคุณไม่จำเป็นต้องประกาศในรหัสถ้าคุณกำลังจะไปตั้งด้วยHTMLJavaScript

key: อาจเป็นชื่อที่คุณต้องการสำหรับแอตทริบิวต์ในขณะที่ไม่ได้ใช้กับแท็กปัจจุบัน value: เป็นสตริงที่มีสิ่งที่คุณต้องการเสมอ

— IgniteCoders
แหล่งที่มา

7

คุณสามารถตั้งค่าคุณสมบัติจาก JavaScript

document.getElementById("foo").myAttri = "myVal"

— EWG
แหล่งที่มา

4

นี่คือตัวอย่าง:

document.getElementsByTagName("html").foo="bar"

นี่คือตัวอย่างอีกวิธีการตั้งค่าแอตทริบิวต์ที่กำหนดเองเป็นองค์ประกอบแท็กร่างกาย:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

จากนั้นอ่านแอตทริบิวต์โดย:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

คุณสามารถทดสอบโค้ดด้านบนในConsoleใน DevTools เช่น

— kenorb
แหล่งที่มา

1

ใช้ data-any ฉันใช้มันเยอะ

<aside data-area="asidetop" data-type="responsive" class="top">

— Erick Boileau
แหล่งที่มา

คุณจะรับdata-*ค่าจาก JavaScript ได้อย่างไร

— Aaron Franke

0

อีกวิธีหนึ่งที่สะอาดและจะรักษาเอกสารให้ถูกต้องคือการเชื่อมข้อมูลที่คุณต้องการในแท็กอื่นเช่น id จากนั้นใช้การแบ่งเพื่อนำสิ่งที่คุณต้องการเมื่อคุณต้องการ

<html>
<script>
  function demonstrate(){
    var x = document.getElementById("example data").querySelectorAll("input");
    console.log(x);
    for(i=0;i<x.length;i++){
      var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
      //concatenated values
      console.log("this is all together: " + line_to_illustrate); 
      //split values
      var split_line_to_illustrate = line_to_illustrate.split(":");
      for(j=0;j<split_line_to_illustrate.length;j++){
        console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
      }      
    }
  }
</script> 

<body>

<div id="example data">
  <!-- consider the id values representing a 'from-to' relationship -->
  <input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
  <input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
  <input id="3:6" type="number" name="quantity" min="0" max="9" value="5">  
</div>

<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>

</body>
</html>

— CAtoOH
แหล่งที่มา

0

คุณสามารถเพิ่มได้ แต่คุณต้องเขียนโค้ดจาวาสคริปต์ด้วย

document.createElement('tag');

เพื่อให้แน่ใจว่าทุกอย่างจะเข้าที่ ฉันหมายถึง Internet Explorer :)

— defau1t
แหล่งที่มา

3

สิ่งนี้จะเกี่ยวข้องถ้าไม่รู้จักชื่อแท็ก นี่คือปัญหาคือแอตทริบิวต์ที่กำหนดเองไม่ใช่แท็กที่กำหนดเอง <tag ...>เห็นได้ชัดว่าคำว่า "แท็ก" ที่นี่หมายถึงเฉพาะแท็ก HTML ใด ๆ

— Jukka K. Korpela

สิ่งนี้ไม่ได้ทำให้ XHTML เป็นโมฆะ (ยกเว้นว่าเป็นแท็กที่รู้จัก)

— Paul

0

ดี! คุณสามารถสร้างแอตทริบิวต์ HTML ที่กำหนดเองได้โดยการปลอมแอตทริบิวต์ข้อมูลในสิ่งที่คุณต้องการ

เช่น.

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

เห็นได้ชัดว่าใช้งานได้ แต่นั่นจะทำให้เอกสารของคุณเป็นโมฆะไม่จำเป็นต้องใช้ JScript เพื่อให้คุณมีแอตทริบิวต์ที่กำหนดเองหรือองค์ประกอบได้เว้นแต่คุณจะต้องทำคุณจะต้องปฏิบัติต่อแอตทริบิวต์สูตร (กำหนดเอง) ใหม่เช่นเดียวกับที่คุณปฏิบัติต่อ แอตทริบิวต์ "data"

จำไว้ว่า "ไม่ถูกต้อง" ไม่ได้มีความหมายอะไรเลย เอกสารจะโหลดได้ดีตลอดเวลา และเบราว์เซอร์บางตัวจะตรวจสอบความถูกต้องของเอกสารของคุณโดยการแสดงตนของ DOCTYPE ..... คุณรู้ว่าฉันหมายถึงอะไร

— Abdulbasit
แหล่งที่มา

-8

คุณสามารถทำสิ่งนี้เพื่อแยกค่าที่คุณต้องการจาก JavaScript แทนแอตทริบิวต์:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>

— กบ
แหล่งที่มา

คุณสมบัติมีอยู่ด้วยเหตุผล; <input type="hidden" value="...">เช่นเดียวกับสิ่งที่ชอบ พิจารณาแม้ว่าความแตกต่างระหว่างชนิดของข้อมูลที่คุณใส่ในคุณลักษณะต่าง ๆ โดยเปรียบเทียบกับข้อมูลที่คุณอาจใส่ในฟิลด์ที่ซ่อนอยู่ การซ่อน a <span>(ของทุกสิ่ง) <a>เพื่อประโยชน์ในการรักษาส่วนหนึ่งของเมตาดาต้านั้นไม่ใช่เรื่องที่ดี มันจะเป็นเรื่องแปลกสำหรับเว็บไซต์ของคุณและขึ้นอยู่กับ JS เป็นอย่างมาก (ผู้คนที่เสื่อมโทรมอย่างสง่างาม)

— Jay Edwards