কিভাবে jQuery ব্যবহার করে সিএসএস পরিবর্তন করবেন?

Question

আমি jQuery ব্যবহার করে সিএসএস পরিবর্তন করার চেষ্টা করছি:

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

আমি এখানে কি মিস করছি?

Comments

এটা ঠিক করা হয়েছে। নীচে উত্তর হিসাবে, দুটি সমাধান রয়েছে: (1) কোঁকড়ানো ধনুর্বন্ধনী অপসারণ এবং ব্যাকগ্রাউন্ডের রঙটিকে ব্যাকগ্রাউন্ড-কালারে পরিবর্তন করুন (সিএসএস ক্লাস) অথবা - মূল সমস্যা) নিখোঁজ কোঁকড়ানো ধনুর্বন্ধনীটি শেষে রাখুন এবং ডিওএম / জেএস স্বরলিপি জাদুকরীটিও ব্যবহার করুন কাজ করে। ধন্যবাদ সবাইকে!

— ব্যবহারকারী 449914

জাভাস্ক্রিপ্টে সিএসএসে হেরফের করা খারাপ অনুশীলন হিসাবে বিবেচনা করা যেতে পারে। টোগলিং ক্লাস যুক্ত / সরান / বিবেচনা করুন।

— অস্টিন

Answer 1

সম্পত্তির নাম ইস্যু হওয়ার পরামর্শ দিচ্ছে এমন লোকদের উপেক্ষা করুন। JQuery এপিআই ডকুমেন্টেশন স্পষ্টভাবে বলেছে যে হয় স্বীকৃতি গ্রহণযোগ্য: http://api.jquery.com/css/

আসল সমস্যাটি হ'ল আপনি এই লাইনে একটি বন্ধ হওয়া কোঁকড়ানো ধনুর্বন্ধনী অনুপস্থিত:

$("#myParagraph").css({"backgroundColor":"black","color":"white");

এটিতে এটি পরিবর্তন করুন:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

এখানে একটি কার্যকারী ডেমো রয়েছে: http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Comments

আপনি কীভাবে একটি ভেরিয়েবল হিসাবে একটি মান যুক্ত করবেন, উদাহরণস্বরূপ , পিএক্সের x সংখ্যা paddingTopহিসাবে ? আমি চেষ্টা করেছি এমন প্রতিটি ধরণের সিনট্যাক্সের ফলে একটি ত্রুটি হয়েছে।

— মানসিকবিদ

কিছু মনে করো না. বুঝতে পেরেছি:$("#main").css({paddingTop: (var_name+20) + "px"});

— মানসিকবিদ

Answer 2

আপনি যে কোনটি করতে পারেন:

$("h1").css("background-color", "yellow");

বা:

$("h1").css({backgroundColor: "yellow"});

Comments

{"backgroundColor": "yellow"}অকার্যকর হলেও বৈধ।

— টিজিআর

@ ব্যবহারকারী 449914: আপনাকে কোনও বস্তুর আক্ষরিক অর্থে সম্পত্তির নামের চারপাশে উদ্ধৃতি দেওয়ার দরকার নেই - {foo: "bar"}একই {"foo": "bar"}।

— টিজিআর

Answer 3

কিছুটা পরিষ্কার করার জন্য, যেহেতু কয়েকটি উত্তর ভুল তথ্য সরবরাহ করছে:

---

JQuery .css () পদ্ধতিটি অনেক ক্ষেত্রে ডিওএম বা সিএসএস স্বরলিপি ব্যবহার করতে দেয়। সুতরাং, উভয় backgroundColorএবং background-colorকাজ সম্পন্ন করা হবে।

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

উপসংহারে আপনার কোডটির সাথে একমাত্র ভুলটি হ'ল অনুপস্থিত }। লাইনটি পড়তে হবে:

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

আপনি কোঁকড়ানো বন্ধনীগুলি বাইরে ছেড়ে যেতে পারবেন না, তবে আপনি চারপাশ থেকে backgroundColorএবং কোটগুলি বাইরে রেখে যেতে পারেন color। আপনি যদি ব্যবহার করেন background-colorতবে হাইফেনের কারণে আপনাকে অবশ্যই এটিকে চারপাশে উদ্ধৃতি দিতে হবে।

সাধারণভাবে, আপনার জাভাস্ক্রিপ্ট অবজেক্টের উদ্ধৃতি দেওয়া একটি ভাল অভ্যাস, কারণ আপনি যদি কোনও বিদ্যমান কীওয়ার্ড উদ্ধৃতি না করেন তবে সমস্যা দেখা দিতে পারে ।

---

একটি চূড়ান্ত নোট এটি jQuery .ডিডি () পদ্ধতি সম্পর্কে

$(handler);

এর সমার্থক শব্দ :

$(document).ready(handler);

পাশাপাশি তৃতীয়টি প্রস্তাবিত ফর্ম সহ।

এর অর্থ এটি $(init)সম্পূর্ণরূপে সঠিক, যেহেতু initসেই পরিস্থিতিতে হ্যান্ডলার। সুতরাং, initডিওএম নির্মিত হলে বরখাস্ত করা হবে।

Answer 4

আপনি যখন jQuery এর সাথে একাধিক CSS সম্পত্তি ব্যবহার করছেন তখন আপনার শুরুতে এবং শেষের দিকে অবশ্যই কোঁকড়া বন্ধনী ব্যবহার করতে হবে। আপনি শেষ কোঁকড়া ধনুর্বন্ধনী অনুপস্থিত।

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

আপনি এই jQuery সিএসএস সিলেক্টর টিউটোরিয়ালটি দেখতে পারেন ।

Answer 5

.css()পদ্ধতি এটা অতি সহজ খুঁজে পেতে এবং সেট সিএসএস বৈশিষ্ট্য এবং .animate মত অন্যান্য পদ্ধতি (সঙ্গে মিলিত), আপনি আপনার সাইটে কিছু শান্ত প্রভাব করতে পারেন করে তোলে।

এর সহজতম ফর্মটিতে, .css()পদ্ধতিটি নির্দিষ্ট ম্যাচের উপাদানগুলির জন্য একটি সিএসএস সম্পত্তি সেট করতে পারে। আপনি কেবল সম্পত্তি এবং মানটিকে স্ট্রিং হিসাবে পাস করুন এবং উপাদানটির সিএসএস বৈশিষ্ট্যগুলি পরিবর্তিত হয়েছে।

$('.example').css('background-color', 'red');

এটি 'উদাহরণস্বরূপ' শ্রেণিযুক্ত যে কোনও উপাদানটির জন্য 'ব্যাকগ্রাউন্ড-বর্ণ' বৈশিষ্ট্যটিকে 'লাল' তে সেট করবে।

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

পরিবর্তে, আপনি .css()পদ্ধতিটি জাভাস্ক্রিপ্ট অবজেক্টে পাস করতে পারেন যা কী / মান জোড় হিসাবে বৈশিষ্ট্য এবং মান রয়েছে। এইভাবে, প্রতিটি সম্পত্তি একসাথে jQuery অবজেক্টে সেট করা হবে।

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

এটি '। উদাহরণ' উপাদানগুলিতে এই সমস্ত CSS বৈশিষ্ট্য পরিবর্তন করবে।

Answer 6

কেবল এটি যুক্ত করতে চেয়েছিলেন যে সিএসএস পদ্ধতির সাথে মানগুলির জন্য সংখ্যাগুলি ব্যবহার করার সময় আপনাকে সেগুলিকে অ্যাডোস্ট্রোফের বাইরে যুক্ত করতে হবে এবং তারপরে অ্যাডিসট্রোফগুলিতে সিএসএস ইউনিট যুক্ত করতে হবে ।

$('.block').css('width',50 + '%');

অথবা

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

Answer 7

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

Answer 8

$ ("। রেডিওভ্যালু")। সিএসএস (background "ব্যাকগ্রাউন্ড-কালার": "- ওয়েবকিট-রৈখিক-গ্রেডিয়েন্ট (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "রঙ": "# 454545 "," প্যাডিং ":" 8 পিএক্স "});

Comments

একটি সামান্য ব্যাখ্যা এছাড়াও সাহায্য করা উচিত।

— টিটিটাও

Answer 9

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং কেন এটি সমস্যার সমাধান করে সে সম্পর্কে তথ্য সরবরাহ করে তার দীর্ঘমেয়াদী মান উন্নত করে।

— এল_জে

Answer 10

ভুল কোড:$("#myParagraph").css({"backgroundColor":"black","color":"white");

এটি "}"পরে অনুপস্থিত white"

এটি এটি পরিবর্তন করুন

 $("#myParagraph").css({"background-color":"black","color":"white"});

Comments

আপনি সর্বাধিক জনপ্রিয় উত্তরটি পুনরাবৃত্তি করেছেন, কেবল 3/2 বছর পরে।

— কার্টিস প্যাট্রিক 22