التحكم بخواص placeholder في Javascript

يمكنك استخدام ::placeholder والتي تتيح لك تعديل التنسيقات دون التأثير على تنسيقات حقل الإدخال نفسه:

input {
  border: #000;
  padding: 10px;
  font-size: 1.6em;
}


input::placeholder {
  color: red;
  font-size: 0.5em;
}

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

مثال باستخدام JQuery:

.your-class::-webkit-input-placeholder {
    color: #b2cde0
 }

$('input').addClass('your-class');

أو دون استخدام إطار عمل:

x.classList.add('your-class');

ألا يمكن ذلك باستخدام كود جافاسكربت لوحده ؟

بتاريخ 3 دقائق مضت قال Hadi Hasan:

ألا يمكن ذلك باستخدام كود جافاسكربت لوحده ؟

التنسيقات وخصائص اللون والخط في placeholder هي ضمن صفوف CSS وليس الجافاسكريبت، في حال استخدمت إطار عمل سيكون من الأسهل عليك الوصول وتحديث القيمة ولكن بجميع الأحوال ماسيتم تحديثه هو CSS.

استطعت الآن عمل ما يلي و هو المطلوب :

test::placeholder {font-size: 24px; }.

و في ملف جافا سكربت :

;element.setAttribute('class', 'test')