কীভাবে jQuery এ একাধিক সিএসএস অ্যাট্রিবিউট সংজ্ঞা দেওয়া যায়?

Question

সবকিছুকে ডানদিকে স্ট্রাইং না করে jQuery এ একাধিক সিএসএস অ্যাট্রিবিউটগুলি সংজ্ঞায়িত করার জন্য কোন সিনট্যাক্টিকাল উপায় রয়েছে:

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

যদি আপনার কাছে থাকে, বলুন, এর মধ্যে 20 টি আপনার কোড পড়া শক্ত হয়ে যাবে, কোনও সমাধান?

JQuery API থেকে, উদাহরণস্বরূপ, jQuery উভয়ের জন্য সঠিক মান বোঝে এবং প্রদান করে

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

এবং

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

লক্ষ্য করুন যে ডিওএম স্বরলিপি সহ, সম্পত্তির নামগুলির চারপাশে উদ্ধৃতি চিহ্নগুলি are চ্ছিক , তবে সিএসএস নোটেশনের সাহায্যে নামটির হাইফেনের কারণে তাদের প্রয়োজন ।

Answer 1

.addClass()আপনার 1 বা আরও বেশি থাকলেও কেবল ব্যবহার করা ভাল । আরও রক্ষণাবেক্ষণযোগ্য এবং পঠনযোগ্য।

আপনার যদি সত্যিই একাধিক সিএসএস বৈশিষ্ট্য করার তাগিদ থাকে তবে নিম্নলিখিতগুলি ব্যবহার করুন:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

বিশেষ দ্রষ্টব্য! হাইফেন
সহ যে কোনও সিএসএস বৈশিষ্ট্য উদ্ধৃত করা দরকার। আমি কোটগুলি রেখেছি যাতে কারওরও এটি পরিষ্কার করার দরকার নেই, এবং কোডটি 100% কার্যকর হবে।

Comments

এটি আসলে ভুল - বৈশিষ্ট্যগুলির চারপাশে পাশাপাশি মানগুলির প্রয়োজন। ডেভ মানকফের উত্তর দেখুন।

— rlb.usa

@ rlb.usa আসলে এটি ভুল নয়, উপরের কাজগুলি jsfiddle.net/ERkXP কাজ করে । ডাউনভোটের জন্য ধন্যবাদ!

— redsquare

কেন পৃথিবীতে প্রস্তাব দেওয়া এবং এমনকি এমন অ-মানক সিনট্যাক্সের পক্ষে যুক্তি দেওয়া! '-' অর্থাত্ একটি স্টাইল যুক্ত করুন font-sizeএবং এটি ব্যর্থ হয়। যদি এটি সীমাবদ্ধতা প্রমাণ করার বিষয়ে হয় তবে তা $('div').css({ width : 300, height: 40 }); বৈধও।

— স্বতন্ত্র

সিএসএস সম্পত্তিতে যদি কোনও ড্যাশ অক্ষর থাকে (অর্থাত্ পাঠ্য-ওভারফ্লো) তবে আপনাকে সম্পত্তিটির চারপাশে উদ্ধৃতিগুলি রাখতে হবে। Rlb.usa এবং জোনাস এটাই বলছেন যা আমি ভাবি।

— ডান

@redsquare দয়া করে আপনার উত্তরের সাথে নিম্নলিখিতগুলি যুক্ত করে বিবেচনা করুন। JQuery API থেকে :For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

— zanetu

Answer 2

এটি একটি বিষয় হিসাবে পাস:

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

Comments

জাভাস্ক্রিপ্ট অবজেক্ট, জেএসএন নয়।

— ক্রিস

Answer 3

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

Comments

এটি পেতে আপনাকে এটিতে কিছু বাক্য গঠন পরিবর্তন করতে হবে: $ ('# বার্তা')। CSS ({প্রস্থ: '550px', উচ্চতা: '300px', 'ফন্ট-আকার': '8pt'});

— এডওয়ার্ড টাঙ্গুয়ে

এরম, সমস্ত ড্রাইভ বাই ডাউনভোটারকে ধন্যবাদ যারা কখনও জকিউয়ের ডকুমেন্টেশন পড়েন না? সংখ্যার মানগুলি পিক্সেল মানগুলিতে স্বয়ংক্রিয়ভাবে কেথএক্সে রূপান্তরিত হয়।

— জিমি 21

হ্যা এখানে সমস্যা কি? width: 550পুরোপুরি বৈধ।

— rfunduk

আমার মনে হয় আপনি fontSizeকোন উদ্ধৃতি ছাড়াও ব্যবহার করতে পারবেন ... আমার প্রশ্ন যদিও .... আপনি কীভাবে সেট করবেন height, এবং width, চলুন ... একই মানটির জন্য বলি .... এটি কি হবে .css({ { width, height} : 300 })?

— অ্যালেক্স গ্রে

@alexgray কোন ব্যাপার সরাসরি এই কাজ করতে উপায়, কিন্তু আপনি তাদের প্রতিটি একই পরিবর্তনশীল সেট করতে পারেন:var x = 100; $el.css({width: x, height: x});

— ডেভ mankoff

Answer 4

একটি সরল অবজেক্ট ব্যবহার করে, আপনি স্ট্রিংগুলি যুক্ত করতে পারেন যা সম্পত্তির নামগুলি তাদের সম্পর্কিত মানগুলির সাথে উপস্থাপন করে। পটভূমির রঙ পরিবর্তন করা এবং পাঠ্যকে আরও সাহসী করা উদাহরণস্বরূপ দেখতে পাবেন:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

বিকল্পভাবে, আপনি জাভাস্ক্রিপ্ট বৈশিষ্ট্যের নামগুলিও ব্যবহার করতে পারেন:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

আরও তথ্য jQuery এর ডকুমেন্টেশন পাওয়া যাবে ।

Answer 5

দয়া করে এটি চেষ্টা করুন,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

Answer 6

এছাড়াও আপনি ব্যবহার করতে পারেন attrসহ style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

Answer 7

রেডস্কয়ারের সাথে সম্মত হন তবে এটি উল্লেখযোগ্য যে আপনার মত text-alignযদি দুটি শব্দের সম্পত্তি থাকে তবে এটি করুন :

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

Answer 8

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

এছাড়াও, addClassআপনার প্রকল্পটিকে আরও স্কেলযোগ্য করতে jQuery এর অন্তর্নির্মিত ব্যবহার করা আরও ভাল ।

উত্স: কীভাবে: jQuery সিএসএস যুক্ত করুন এবং সিএসএস সরান

Answer 9

এটা চেষ্টা কর

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

Answer 10

লিপি

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

এইচটিএমএল

<div id="hello"></div>

Answer 11

আপনি এটি চেষ্টা করতে পারেন

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

Comments

এটা ভাল পদ্ধতির বন্ধু না। ব্যবহারকারীর জসন প্রকারটি প্রেরণ করা ভাল

— ওয়াইস কার্নি

Answer 12

পরিবর্তনশীল ব্যবহারের সেরা উপায়

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

Answer 13

আপনি যদি একাধিক CSS বৈশিষ্ট্য পরিবর্তন করতে চান তবে আপনাকে নীচের মতো অবজেক্ট কাঠামোটি ব্যবহার করতে হবে :

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

তবে এটি আরও খারাপ হয় যখন আমরা প্রচুর শৈলী পরিবর্তন করতে চাই , তাই আমি আপনাকে যা পরামর্শ দিচ্ছি তা হল jQuery ব্যবহার করে CSS পরিবর্তনের পরিবর্তে একটি ক্লাস যুক্ত করা, এবং একটি ক্লাস যুক্ত করা আরও পাঠযোগ্য read

নীচে উদাহরণ দেখুন:

সিএসএস

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery এর

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

প্রাক্তনদের তুলনায় পূর্ববর্তী উদাহরণের একটি সুবিধা হ'ল আপনি যদি কিছু সিএসএস যুক্ত করতে চান onclickএবং দ্বিতীয় ক্লিকে সেই CSS সরিয়ে ফেলতে চান তবে পরবর্তী উদাহরণে আপনি ব্যবহার করতে পারেন.toggleClass('custom-class')

যেখানে পূর্বের উদাহরণে আপনাকে আগে নির্ধারিত বিভিন্ন মান সহ সমস্ত CSS নির্ধারণ করতে হবে এবং এটি জটিল হবে, সুতরাং শ্রেণি বিকল্পটি ব্যবহার করা আরও ভাল সমাধান হবে।

Answer 14

তুমি ব্যবহার করতে পার

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

সেরা উপায় হ'ল $ ('নির্বাচক') ব্যবহার করুন addডক্লাস ('কাস্টম-শ্রেণি') এবং

.custom-class{
width:16px,
color: green;
margin: 0;
}