PDA

View Full Version : سوال: تغییر css با جاوااسکریپت طبق متغیرها


marasiali
سه شنبه 26 خرداد 1394, 15:41 عصر
من تو جاوا اسکریپت خیلی خیلی تازه کارم و تازه دارم یاد میگیرم اما یه مشکلی که من دارم اینه که میخوام css ام با اطلاعات کاربر تغییر کنه مثلا یه یه دیو داشته باشم با یه سایز مشخص بعد کنارش یه تکست باکس باشه که به محض وارد کردن عدد در اون تکست باکس border عدد تو متغیر x بره و مقدار x برحسب پیکسل به حاصیت border دیو تو css نسبت داده بشه.(بدون زدن دکمه تایید) یعنی به محض اینکه فرد مثلا عدد سه رو وارد کرد دیو مورد نظرم Border سه پیکسلی بگیره و اگه عددو تغییر داد کد border قبلی من هم تغییر کنه نه اینکه هی بهش اضافه شه.(البته واضحه که باید از onkeydown استفاده کنم ولی دسترسی به Css رو نمیدونم.)


بی زحمت کدو تو سایتای مثل JSSFidle (http://jsfiddle.net/) برام بذارین.
barnamenevis2016
سه شنبه 26 خرداد 1394, 16:12 عصر
سلام.فرض کنید...نام Id دیو مورد نظر باشه testDiv حالا کد جاوا و نکته اصلی فکر نم این باشه،برای تغییر استایلاش از کد زیر استفاده می کنیم:

document.getElementById("testDiv").style.borde=value + "px solid"
حالا کافیه...که رویدادی بنویسیم...که با زدن دکمه و تایپ عددی در تکس باکس کد بالا اجرا بشه که value هم مساوی مقدار عدد وارد شده در تکس باکسی که نام Id اون برابره input که برابره با

document.getElementById("input").value

http://jsfiddle.net/dzjsvhs4/
marasiali
سه شنبه 26 خرداد 1394, 16:38 عصر
خیلی ممنون فقط چون همونطور که گفتم من خیلی تازه کارم میشه یه توضیحی درباره addEventListener بدین؟چیز خاصی درباره اش تو نت پیدا نکردم.چرا تو همون html تو تگ input ، onkeyup تعریف نکردین و بهش تابع موردنظرو بدین؟فرقی داره؟
barnamenevis2016
سه شنبه 26 خرداد 1394, 16:56 عصر
خواهش می کنم...addEventListener کارش اینه که می آییم یک رویدادی رو انتخاب می کنیم که با اجرای اون رویداد فلان تابع اجرا بشه...توی این مثال هم می شد از همون onkeyup در تگ input استفاده کرد....ولی خوب addEventListener رویدادهای خیلی بیشتری رو ساپورت می کنه و در خیلی موارد دیگه هم کاربرد داره و در بعضی جاها باعث راحتی کار برنامه نویسی می شه و کار رو سریعتر پیش می بره که حالا خودتون متوجه می شید به مرور...مثلا فرض کنید یک ده تایی input دارید با یک نام کلاس مشترک..به جای اینکه تک تک توی تگ او input ها اون onkeyup رو وارد کنید یک بار می آیید از addEventListener استفاده می کنید و به همه اینپوت های دلخواه یک رویداد رو نسبت می دید...ولی خوب بعضی جاها فرق نمی کنه...اینجا هم می شد مثلا...ابتدا یک تابع تعریف کرد و بعد تابع رو به خصوصیت onkeyup در input نسبت داد و با زدن کیبورد در اون فیلد.تابع اجرا بشه،اینم می شد....
SCoder
چهارشنبه 17 تیر 1394, 23:00 عصر
چیزی رو که میخوای با این کار بدست میاری ...فقط کافیه به تابع ChangeSTH یک id برای input و یک id برای div بدهی بعد با وارد کردن هر عدد border تغییر میکنه ....

<html><head><title>Default</title></head><body><script>var ChangeSTH=new function(){ //this function will change the //border of the div with id = myDiv //whenever client input sth new this.div=null; this.input=null; this.init=function() { //this func will initialize this object var self=ChangeSTH; self.div=document.getElementById('myDiv'); self.input=document.getElementById('myInput'); self.div.style.border=10+'px solid blue'; document.onkeyup=self.changeBorder; } this.changeBorder=function() { var self=ChangeSTH; self.div.style.border=self.input.value+'px solid blue'; }}window.onload=ChangeSTH.init;</script><div id='myDiv' style="border:2px solid blue;width:45px;height:10px;"></div><input id='myInput' type="text" value="" size="10" maxlength="30" /></body></html>