كيفية تغيير خصائص css html العناصر باستخدام جافا سكريبت أو مسج

Question

كيف يمكنني تغيير CSS من javascript.

أنا باستخدام jQuery-ui Dialog و أريد تغيير اسلوب DIV من جافا سكريبت.

شكرا

Answer 1

في مسج وثائق . إذا كنت تريد أي شيء سيكون هناك.

وعلى أية حال، إذا كنت ترغب في إضافة أنماط إلى العناصر، تحتاج إلى استخدام وظيفة css، والتي لديها عدد قليل من المتغيرات.

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

وحتى إذا كان لديك DIV مع معرف "mydiv" وكنت تريد أن تجعل خلفية حمراء، كنت ستفعل

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

والطريقة الأولى هي أسهل إذا كنت وضع الامور متعددة في وقت واحد.

إذا كنت تريد أن تحقق ما تم تعيين خاصية حاليا، يمكنك استخدام البديل من 2nd الخيار، فقط حذف القيمة.

var color = $("div#mydiv").css('background-color');

ومن شأنه أن يجعل أن color وred فار إذا قمت بتعيين بالفعل أعلاه، على سبيل المثال.

ويمكنك أيضا إضافة وإزالة فئات، والقيام شيء من هذا القبيل

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

هذه الإجابة تعمل حتى بدون مسج.

وهكذا يكون لديك شيء من هذا القبيل:

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

إذا كنت ترغب في تغيير فقط بعض السمات، يمكنك دائما العثور على العنصر باستخدام

var div = document.getElementById('redtext');

وظيفة ومن ثم تغيير نمط اللون التي توليها

div.style.color = 'Green';

وجعل النص الأحمر بك تظهر باللون الأخضر بدلا من ذلك.

إذا كنت تريد تغيير فئة محددة لشعبة إلى الدرجة نمط آخر، يمكنك القيام به:

div.className = 'bar';

وجعل شعبة الآن استخدام شريط الطبقة، الأمر الذي يجعل الخاص الأخضر سابقا الأزرق النص.

Answer 3

هناك عدة طرق التعامل مع عناصر أنماط باستخدام إطار مسج.نلقي نظرة من خلال الوثائق ذات الصلة إلى CSS و تغيير سمات:

• http://docs.jquery.com/Attributes/addClass#class
• http://docs.jquery.com/CSS

Answer 4

وحاول this.This هو رمز مسج.

 $("myDiv").css({"color":"red","display":"block"})

إذا كنت تستخدم VANILA javacript، حاول هذا.

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";