আমি কি কোনও উপাদান নামের সাথে সিএসএস শৈলী প্রয়োগ করতে পারি?

Question

আমি বর্তমানে এমন একটি প্রকল্পে কাজ করছি যেখানে আমি সিএসএস শৈলীগুলি প্রয়োগ করছি তার উপর আমার কোনও নিয়ন্ত্রণ নেই। এবং এইচটিএমএল খুব ভাল লেবেলযুক্ত নয়, এই অর্থে যে উপাদানগুলির মধ্যে পার্থক্য করার মতো পর্যাপ্ত আইডি এবং শ্রেণীর ঘোষণা নেই।

সুতরাং, আমি যে আইডি বা শ্রেণীর বৈশিষ্ট্য নেই সেগুলিতে স্টাইলগুলি প্রয়োগ করতে পারি এমন উপায়গুলি আমি সন্ধান করছি।

কখনও কখনও, ফর্ম আইটেমগুলির একটি "নাম" বা "মান" বৈশিষ্ট্য থাকে:

<input type="submit" value="Go" name="goButton">

নাম = "গোবটন" এর উপর ভিত্তি করে আমি কোনও স্টাইল প্রয়োগ করতে পারি কি? "মান" সম্পর্কে কি?

এটি এমন এক ধরণের জিনিস যা খুঁজে পাওয়া শক্ত কারণ কারণ গুগল অনুসন্ধানে এমন সব ধরণের দৃষ্টান্ত পাওয়া যাবে যেখানে ওয়েব নামগুলিতে "নাম" এবং "মান" এর মতো বিস্তৃত পদগুলি প্রদর্শিত হবে।

আমি সন্দেহের ধরণের উত্তরটি হ'ল না ... তবে কারও কাছে চালাক হ্যাক রয়েছে?

যেকোনো উপদেশ সাদরে গৃহীত হবে।

Answer 1

আপনি বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করতে পারেন,

input[name="goButton"] {
  background: red;
}

<input name="goButton">

এটি আই 6 এ সমর্থিত নয় জেনে রাখুন।

আপডেট: ২০১ 2016-এ আপনি চাইলে এগুলি ব্যবহার করতে পারবেন, যেহেতু আই 6 মারা গেছে। http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

Answer 2

পাঠ্য ইনপুট উদাহরণ

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

Answer 3

আপনি অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে পারেন তবে আইডির মতো তারা আই 6 তে কাজ করবে না যেমন মেডিয়ার বলেছিল, সেখানে যে জাভাস্ক্রিপ্টের ওয়ার্কআউন্ড রয়েছে। Selectivizr পরীক্ষা করুন

বৈশিষ্ট্য নির্বাচনকারীদের সম্পর্কে আরও বিস্তারিত: http://www.css3.info/preview/attribute-selectors/

/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }

Answer 4

ভবিষ্যতের গুগলদের জন্য, এফওয়াইআই, @ মিডার দ্বারা উত্তরের পদ্ধতিটি কোনও নামের বৈশিষ্ট্যযুক্ত যে কোনও উপাদানগুলির সাথে ব্যবহার করা যেতে পারে, সুতরাং <iframe>এর নামের সাথে একটি xyzযুক্তি বলতে দিন তবে আপনি নীচের মতো নিয়মটি ব্যবহার করতে পারেন।

iframe[name=xyz] {    
    display: none;
}   

nameঅ্যাট্রিবিউট নিম্নলিখিত উপাদানের ব্যবহার করা যেতে পারে:

• <button>
• <fieldset>
• <form>
• <iframe>
• <input>
• <keygen>
• <map>
• <meta>
• <object>
• <output>
• <param>
• <select>
• <textarea>

Comments

এটি আসলে প্রশ্নে কিছু যুক্ত করে না। nameঅ্যাট্রিবিউট কিছু রেখে দেওয়া যেতে পারে যদি সত্যিই চেয়েছিলেন

— ইসহাক

Answer 5

আমি যদি আপনার প্রশ্নটি তখনই বুঝতে পারি,

হ্যাঁ আপনি পৃথক উপাদানটির আইডি বা নাম উপলব্ধ থাকলে স্টাইল সেট করতে পারেন,

যেমন

যদি আইডি পাওয়া যায় তবে আপনি এই উপাদানটির উপর নিয়ন্ত্রণ পেতে পারেন,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

অন্যথায় যদি নাম উপলভ্য থাকে তবে আপনি এই উপাদানটির উপর নিয়ন্ত্রণ পেতে পারেন,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

Answer 6

[name=elementName]{}ট্যাগ ছাড়াই ব্যবহার করা আগেও কাজ করবে। এটি এই নামের সাথে সমস্ত উপাদানকে প্রভাবিত করবে।

উদাহরণ স্বরূপ:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

Answer 7

এটি ক্যোয়ারী নির্বাচকদের জন্য নিখুঁত কাজ ...

var Set1=document.querySelectorAll('input[type=button]');  // by type

var Set2=document.querySelectorAll('input[name=goButton]'); // by name

var Set3=document.querySelectorAll('input[value=Go]'); // by value

তারপরে পাওয়া উপাদানগুলিতে কাজ করতে আপনি এই সংগ্রহগুলির মধ্য দিয়ে লুপ করতে পারেন।

Answer 8

যদি আপনি ইনপুটটিতে নামটি ব্যবহার না করে অন্য উপাদান ব্যবহার করে থাকেন তবে আপনি সেখানে বৈশিষ্ট্যের সাহায্যে অন্যান্য উপাদানকে লক্ষ্য করতে পারেন।

    [title~=flower] {
      border: 5px solid yellow;
    }

    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_flwr.gif" title="flowers" width="224" height="162">

তার সাহায্য আশা করি। ধন্যবাদ

Answer 9

আপনি jQuery ব্যবহারের সম্ভাবনা অন্বেষণ করেছেন? এটির একটি খুব সহজ সংখ্যক সিলেক্টর মডেল রয়েছে (সিএসএসের মতো সিনট্যাক্সের অনুরূপ) এবং এমনকি আপনার উপাদানগুলির আইডি না থাকলেও আপনার পিতামাত্ত -> সন্তানের -> নাতনী সম্পর্ক ব্যবহার করে সেগুলি নির্বাচন করতে সক্ষম হওয়া উচিত। একবার আপনি সেগুলি নির্বাচন করে নিলে একটি খুব সাধারণ পদ্ধতি কল আসে (আমি সঠিক নামটি ভুলে যাই) যা আপনাকে উপাদানগুলিতে সিএসএস স্টাইল প্রয়োগ করতে দেয়।

এটি ব্যবহার করা সহজ এবং বোনাস হিসাবে হওয়া উচিত, আপনি সম্ভবত খুব ক্রস প্ল্যাটফর্মের সাথে সামঞ্জস্যপূর্ণ হবেন।