আমি কি এইচটিএমএল ট্যাগে একটি কাস্টম বৈশিষ্ট্য যুক্ত করতে পারি?

348

নীচের মত আমি কি এইচটিএমএল ট্যাগে একটি কাস্টম বৈশিষ্ট্য যুক্ত করতে পারি?

<tag myAttri="myVal" />
html  custom-attribute 
— lovespring
সূত্র
3
— তামাস সিজনে
2
এবং এছাড়াও স্ট্যাকওভারফ্লো.com
— প্রশ্নগুলি / ২০৯৪২৮/২
— সিরো সান্তিলি 郝海东 冠状 病 六四 事件
যদিও উত্তরগুলিতে "হ্যাঁ" বলা হয়েছে তা নিশ্চিত করুন যে আপনার কাছে এমন একটি বৈশিষ্ট্যযুক্ত থিমযুক্ত সেট রয়েছে যা প্লাগ-ইনগুলির সাথে ব্যবহারের সম্ভাবনা নেই। উদাহরণস্বরূপ: "ডেটা-মায়ুনিক্যাট্রিবিউট"। আমি সাধারণত "ডাটা-" এর পরে কিছু ধরণের দুটি বর্ণের সংক্ষিপ্তসার সহ কিছু উপসর্গ করি। উদাহরণস্বরূপ: "ডেটা-yscolumntype।" এটি অনন্য রাখুন।

উত্তর:

189

আপনি এটির অনুমতি দেওয়ার জন্য আপনার! ডক্টইপিই ঘোষণা (অর্থাত্ ডিটিডি) সংশোধন করতে পারেন, যাতে [এক্সএমএল] নথিটি এখনও বৈধ থাকবে:

<!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এর অর্থ এটি একটি alচ্ছিক বৈশিষ্ট্য, বা আপনি ব্যবহার করতে পারেন #REQUIREDইত্যাদি

আরও তথ্য ডিটিডি - বৈশিষ্ট্যগুলিতে ।

— carillonator
সূত্র
2
আপনার HTML ফাইলের শীর্ষে সমস্ত কিছু রেখে দিন (এক্সএইচটিএমএল 1.0 ট্রানজিশনালটি ঠিক আছে ধরে ধরে)
— ক্যারিলোনেটর
8
হয়তো আমি কিছু মিস করছি তবে আপনি যদি এই পদ্ধতির অনুসরণ করেন তবে]> রেন্ডার করা ওয়েব পৃষ্ঠায় প্রদর্শিত হবে। ফায়ারফক্স ৩.6-এ আমার কাছে ঘটছে। Alistapart.com/articles/customdtd এর এই স্নিপেটটি এই আচরণটি যাচাই করে মনে হচ্ছে: "আপনি যদি এই নিবন্ধের জন্য নমুনা ফাইলগুলি ডাউনলোড করেন এবং ফাইলটি অভ্যন্তরীণ html যাচাই করেন তবে আপনি এটি নিজের জন্য দেখতে পারেন Unfortunately দুর্ভাগ্যক্রমে, আপনি যখন একটি ব্রাউজারে ফাইলটি প্রদর্শন করেন ,]] স্ক্রিনে দেখায় this এই বাগের চারপাশে কোনও উপায় নেই, সুতরাং এই পদ্ধতির ঠিক বাইরে। "
— মাইক
3
"]" উপস্থিতিতে সহায়তা করতে পারে এমন কয়েকটি জিনিস: .xhtml ফাইলের নাম এক্সটেনশন দিয়ে ফাইলটি সংরক্ষণ করুন। ফাইলটিতে মাইম টাইপ অন্তর্ভুক্ত করুন <meta http-equiv="content-type" content="application/xhtml+xml" />।
— এলএস
4
ব্রাউজারের আচরণ হিসাবে যতটা বিবেচনা করা হয় ততই গুণাবলীটি ঘোষণা করা অর্থহীন। তারা ডিটিডি পড়ে না। তদুপরি, তারা অভ্যন্তরীণ উপসেটটি (যা এখানে ব্যবহৃত হয়) সঠিকভাবে এড়িয়ে যেতে পারে না, যা "]>" মেজ ব্যাখ্যা করে। ঘোষণাটি কেবল আনুষ্ঠানিক বৈধতার জন্য প্রাসঙ্গিক হবে, এবং উত্পাদন পৃষ্ঠায় ব্যবহার করা উচিত নয়।
— জুলকা কে। কোর্পেলা
32
এই উত্তরটি কেবল এক্সএইচটিএমএল এবং এইচটিএমএল ৪.০১ এবং তার চেয়ে বেশি পুরানো ক্ষেত্রে প্রযোজ্য। এটি সম্পূর্ণরূপে মিস করে যে আপনি এখন আপনার নিজস্ব বৈশিষ্ট্যগুলি তৈরি করতে পারেন যদি আপনি সেগুলির সাথে উপসর্গ করেন data-।
— ব্রেন্টনস্ট্রাইন
299

আপনি ইচ্ছামত আপনার উপাদানগুলিতে কাস্টম বৈশিষ্ট্য যুক্ত করতে পারেন। তবে এটি আপনার দস্তাবেজটিকে অবৈধ করে তুলবে।

এইচটিএমএল 5 এ আপনার পূর্বনির্ধারিত কাস্টম ডেটা অ্যাট্রিবিউটগুলিdata- ব্যবহার করার সুযোগ থাকবে ।

— গাম্বো
সূত্র
169
মনে রাখবেন "অবৈধ" অর্থ কিছুই নয়। পৃষ্ঠাটি সূক্ষ্ম সময়ের জন্য 100% রেন্ডার করবে।
— জন Farrell
22
প্রকৃতপক্ষে "অবৈধ" এর খুব বাস্তব-জগতের অন্তর্নিহিত রয়েছে। যেমন এটি আপনার দস্তাবেজটিকে কুইর্কস্মোড রেন্ডারিংয়ে রাখতে পারে। যে কোনও হারে, HTML5 ডক্টিপ ব্যবহার করুন এবং আপনি বৈধ থাকবেন।
— ব্রেন্টনস্ট্রাইন
এখানে বিভিন্ন ডক্টাইপ এবং সম্পর্কিত ব্রাউজার মোডগুলির একটি ভাল টেবিল রয়েছে: hsivonen.fi/doctype/# হ্যান্ডলিং । এইচটিএমএল 5 ডক্টাইপ 2001-পরবর্তী সমস্ত ব্রাউজারগুলিকে (পূর্ণ) স্ট্যান্ডার্ড মোডে স্যুইচ করে। এক্সএইচটিএমএল ট্রানজিশনাল এবং এইচটিএমএল 4 ট্রানজিশনাল (বিশেষত ডিটিডি ব্যতীত) ডকুমেন্ট টাইপ করে না :)
— ইলিয়া
পবিত্র মিষ্টি খ্রিস্ট, আপনাকে ধন্যবাদ। @ জেফার ঠিক আছে তবে এটি পঠনযোগ্যতা হ্রাস করে।
— কখনই না
আমার দস্তাবেজ যাইহোক অবৈধ, কারণ এটি আমাকে বলে |href যে একটি CSS এ অনুমোদিত নয় , তবে এটি Google ফন্টের জন্য প্রয়োজনীয়
— পোস্টটি সেলফ
73

না, এটি বৈধতা ভঙ্গ করবে।

এইচটিএমএল 5 এ আপনি কাস্টম বৈশিষ্ট্যগুলি যুক্ত করতে পারবেন / করতে পারবেন। এটার মতো কিছু:

<tag data-myAttri="myVal" />
8
তবে, আমি বৈধতার কোনও যত্ন নিচ্ছি না, আমি কেবল এটি জাভাস্ক্রিপ্ট দ্বারা অ্যাক্সেস করা যেতে চাই।
— lovespring
10
এটা অবশ্যই কাজ করবে। তবে ইচ্ছাকৃতভাবে অবৈধ দলিল তৈরি করা এত ভাল ধারণা নয়।
31
অবৈধ দস্তাবেজগুলি তৈরি করা একটি দুর্দান্ত ধারণা। গুগল এগুলি লোডের সময় হ্রাস করার জন্য তৈরি করে, প্রতিটি সাইট ক্যানভাস ব্যবহার করে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে ব্যবহার করে এবং জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি এইচটিএমএল উপাদানগুলির অর্থবহ ডেটা টানতে কাস্টম বৈশিষ্ট্য কৌশলটি ব্যবহার করা আরও সহজ easier
— জন Farrell
3
@ জেফার: ক্যানভাসটি অবৈধ নয়। এটি এইচটিএমএল 4.01 এ নেই; তবে এটি আসন্ন এইচটিএমএল 5 স্পেসিফিকেশনের একটি সঠিক আইনী অংশ।
— বিসিএটি
3
"অবৈধ নয়" মানে কি? এটি কোনও গৃহীত স্পেসিফিকেশনের অংশ নয়। যে নির্দিষ্টকরণের অস্তিত্ব নেই তার বিপরীতে কীভাবে বৈধ হতে পারে?
— জন Farrell
11

হ্যাঁ, আপনি, আপনি এটি প্রশ্ন নিজেই করেছিল পারেন: <html myAttri="myVal"/>।

— luvieere
সূত্র
2
আপনি এইচটিএমএলকে কী হিসাবে সংজ্ঞা দিচ্ছেন তার উপর নির্ভর করে। আমি এইচটিএমএলকে এসজিএমএল ভিত্তিক একটি উপাদান হিসাবে উপাদান এবং বৈশিষ্ট্যের একটি নির্দিষ্ট সেট সহ ভাবি with এক্সএইচটিএমএল হল এক্সএমএলে একটি বৈকল্পিক, নির্দিষ্ট উপাদান এবং বৈশিষ্ট্যের একটি সেট যা এইচটিএমএল এর মতো অনেকগুলি। আপনি যখন নিজের বৈশিষ্ট্যগুলি ব্যবহার করেন, এটি এখনও এক্সএমএল এর এসজিএমএল, তবে আমার মতে এক্সএইচটিএমএল এর আর HTML নেই।
— দ্বৈয়ে মান
এটিকে অ্যাডহক এক্সটেনশন হিসাবে গ্রহণ করুন, কঠোর অর্থে মান নয়, তবে প্রয়োজনীয়তার এমন এক প্রয়োগ যা কাস্টম অ্যাট্রিবিউটস যুক্ত থাকলে তা পার্সিংয়ে ব্যর্থ হওয়া উচিত নয়।
— lvieere
2
ডউউওএম: অবশ্যই, সবসময় HTML5 এর এইচটিএমএল সিরিয়ালাইজেশন থাকে যা এসজিএমএল বা এক্সএমএল নয়।
— বিসিএটি
2
এবং আপনি প্রক্রিয়াটি নথিটি ভেঙে (অবৈধ) করেছেন। ভাল অনুশীলন না।
— ক্যারিলোনেটর
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>
স্নিপেট প্রসারিত করুন

— জসিম ড্রড
সূত্র
2
আপনার উত্তরের সংক্ষিপ্ত ব্যাখ্যা যোগ করুন।
— নিকোলে মিহায়লভ
10

হ্যাঁ, আপনি এটা করতে পারেন!

পরবর্তী HTMLট্যাগ থাকা:

<tag key="value"/>

আমরা এর সাথে তাদের বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারি JavaScript:

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

Element.setAttribute()HTMLযদি অস্তিত্ব না থাকে তবে ট্যাগটিতে বৈশিষ্ট্যটি রাখুন । সুতরাং, আপনি HTMLযদি কোডটি সেট করতে যাচ্ছেন তবে আপনাকে কোডে এটি ঘোষণা করার দরকার নেইJavaScript ।

key: বৈশিষ্ট্যটির জন্য আপনি যে কোনও নাম চান, এটি ইতিমধ্যে বর্তমান ট্যাগের জন্য ব্যবহৃত হয় না। value: এটি সর্বদা আপনার প্রয়োজন অনুযায়ী স্ট্রিং থাকে।

— IgniteCoders
সূত্র
7

আপনি জাভাস্ক্রিপ্ট থেকে বৈশিষ্ট্য সেট করতে পারেন।

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

আপনি ডিভটুলগুলিতে কনসোলে উপরের কোডটি পরীক্ষা করতে পারেন , যেমন

জেএস কনসোল, ক্রোমে ডেভটুলগুলি

— kenorb
সূত্র
0

আরেকটি পদ্ধতির, যা পরিষ্কার এবং ডকুমেন্টটি বৈধ রাখবে, তা হ'ল আপনি যে তথ্যটি অন্য ট্যাগের মধ্যে চান আইডি আইডিটি সংযুক্ত করা, তারপরে আপনি যখন চান তখন যা চান তা নিতে বিভক্ত ব্যবহার করুন। 

<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');

সবকিছু জায়গায় পড়ে আছে তা নিশ্চিত করতে। মানে ইন্টারনেট এক্সপ্লোরার :)

— defau1t
সূত্র
3
যদি ট্যাগের নাম আইই না জানা থাকে তবে এটি প্রাসঙ্গিক হবে। এখানে সমস্যাটি একটি কাস্টম বৈশিষ্ট্য, কাস্টম ট্যাগ নয়; এখানে "ট্যাগ" শব্দটির <tag ...>অর্থ স্পষ্টতই কোনও HTML ট্যাগ রয়েছে।
— Jukka K. Korpela
এটিও এইচএইচটিএমএলকে অকার্যকর করে না (এটি কোনও স্বীকৃত ট্যাগ না হলে)?
— পল
0

আমরা হব! আপনি প্রকৃতপক্ষে যা চান তাতে ডেটা অ্যাট্রিবিউটগুলি ছদ্মবেশ ধারণ করে আপনি আসলে কাস্টম এইচটিএমএল বৈশিষ্ট্যগুলির একটি গুচ্ছ তৈরি করতে পারেন।

যেমন। 

[attribute='value']{
color:red;
}
<span attribute="value" >hello world</span>

এটি স্পষ্টতই কাজ করে তবে এটি আপনার নথিকে অকার্যকর করে দেবে, কাস্টম বৈশিষ্ট্য বা এমনকী উপাদানগুলি রাখার জন্য আপনার জন্য জেএসক্রিপ্ট ব্যবহার করার দরকার নেই যতক্ষণ না আপনার নিজের নতুন সূত্রযুক্ত (কাস্টম) বৈশিষ্ট্যগুলি ঠিক একইভাবে আচরণ করতে হবে আপনি নিজের আচরণ হিসাবে "ডেটা" বৈশিষ্ট্য

"অবৈধ" মনে রাখার অর্থ কিছু নয়। দস্তাবেজটি সর্বদা সূক্ষ্ম লোড হবে। এবং কিছু ব্রাউজারগুলি কেবলমাত্র ডক্টইপিইয়ের উপস্থিতি দ্বারা আপনার দস্তাবেজটিকে বৈধতা দেয় ....., আপনি আসলে আমার অর্থ কী তা জানেন।

— Abdulbasit
সূত্র
-8

আপনি কোনও গুণের পরিবর্তে জাভাস্ক্রিপ্ট থেকে যে মানটি চান তা উত্তোলনের জন্য আপনি এর মতো কিছু করতে পারেন:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
— ব্যাঙ
সূত্র
বৈশিষ্ট্য একটি কারণে বিদ্যমান; যেমন জিনিস পছন্দ <input type="hidden" value="...">। যাইহোক, আপনি কোনও গোপন ক্ষেত্রের মধ্যে রেখে দিতে পারেন এমন ডেটার বিপরীতে আপনি বিভিন্ন বৈশিষ্ট্যে যে ডেটা রেখেছেন তার মধ্যে পার্থক্য বিবেচনা করুন। কোনও টুকরো মেটাডাটা বজায় রাখার স্বার্থে একটি <span>(সমস্ত কিছু) লুকিয়ে <a>রাখা ভাল পদক্ষেপ নয়। এটি আপনার সাইটের কাছে অদ্ভুত এবং জেএসের উপর খুব বেশি নির্ভরশীল (কৃপিত অবক্ষয়, লোক)।
— জে এডওয়ার্ডস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.