PDA

View Full Version : سوال: سوئیچ بین css با جاوا اسکریپت


peymannaji
یک شنبه 24 شهریور 1387, 19:05 عصر
با سلام .

آیا تا بحال دیدید که بعضی از سایت ها امکان این رو میدن که شما با کلیک بروی دکمه های رنگی استایل سایت رو تغییر بدید و یا سایجز فونت ها رو عوض کنید ؟ بیشتر مد نظر من سوئیچ کردن بین فایل های css است . این کار رو میخواستم بدونم با java script چگونه انجام میدن اگر ممکنه یک نمونه و مثالی اینجا قرار بدید .

با تشکر ...
m.hamidreza
دوشنبه 25 شهریور 1387, 10:41 صبح
var styleNode = document.createElement('link');
styleNode.setAttribute('rel', 'stylesheet');
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(styleNode);
twelve
دوشنبه 25 شهریور 1387, 15:27 عصر
البته از این روش ساده تر هم میتونید استفاده کنید ، به تگ لینک یک آیدی میدیم مثلا link1 و بعد مثلا با کلیک بر روی یک دکمه فایل css رو عوض میکنیم :


<input type='buttont' value='Change' onclick= 'document.getElementById('link1').href='style.css' />
peymannaji
دوشنبه 25 شهریور 1387, 16:25 عصر
البته از این روش ساده تر هم میتونید استفاده کنید ، به تگ لینک یک آیدی میدیم مثلا link1 و بعد مثلا با کلیک بر روی یک دکمه فایل css رو عوض میکنیم :


<input type='buttont' value='Change' onclick= 'document.getElementById('link1').href='style.css' />



سلام دوست عزیز . من کد شما رو تست کردم جواب نداد ارور میده ... اگه ممکن هست یک نگاه به کد بندازید ....

در ضمن آقای حمیدرضا ممنون بخاطر کدتون کار کرد ...


با تشکر
twelve
دوشنبه 25 شهریور 1387, 18:36 عصر
من باهاش کار میکنم مشکلی هم ندارم ، شما چه اروری میگیرید ؟!
peymannaji
دوشنبه 25 شهریور 1387, 18:49 عصر
فایل رو ضمیمه کردم ببینید میتونید مشکل رو پیدا کنید .
با تشکر
bigcowboy
دوشنبه 25 شهریور 1387, 19:08 عصر
wtf
؟
default2.html اصلاح كنيد:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>a</title>
<script language="javascript" type="text/javascript">
</script>
<link id="link1" href="wtf.css" rel="stylesheet" type="text/css" />
</head>

<body >
<p><span lang="fa">این یک تست است </span></p>
<p>
<a href="../My%20Documents/Visual%20Studio%202005">
سلام خوبی</a></p>

<input type="button" value="Change" onclick= "document.getElementById('link1').href='style.css'" />

<p>&nbsp;</p>
<p>&nbsp;</p>

&nbsp;

</body>

</html>
peymannaji
دوشنبه 25 شهریور 1387, 20:11 عصر
ممنون از لطف همگی . مشکلم حل شد ....
sahele_sheni
سه شنبه 16 مهر 1387, 17:03 عصر
<linkid="link1"href="Style/style.css"rel="stylesheet"type="text/css"/>
<linkid="link2"href="Style/style2.css"rel="stylesheet"type="text/css"/>

این کد ها رو واسه style ها گذاشتم


<inputid="Submit1"type="button"value="chang1"onclick="document.getElementById('link1').href='Style/style.css'"/><br/>
<inputid="Submit2"type="button"value="chang2"onclick="document.getElementById('link2').href='Style/style2.css'"/>


و از این دو دکمه هم استفاده کردم ولی Style صفحه عوض نشد !؟؟؟؟؟؟
peymannaji
سه شنبه 16 مهر 1387, 17:32 عصر
این کد رو استفاده کنید :
sahele_sheni
سه شنبه 16 مهر 1387, 17:53 عصر
دوست عزیز فایلی که گذاشتی download نمیشه !
peymannaji
سه شنبه 16 مهر 1387, 18:02 عصر
من دانلود کردم مشکلی نداشت ...
sahele_sheni
چهارشنبه 17 مهر 1387, 00:11 صبح
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

فقط کافیه کدرو وارد برنامه کنید !!!
امید امرایی
شنبه 20 مهر 1387, 23:56 عصر
تغییر دادن استایل های یک Object بوسیله تغییر دادن کل یک Stylesheet کار منطقی نیست.
ساده و استاندارتد تر اینه که Stlyle مربوط به اون Element رو تغییر بدید نه کل فایل رو.



document.getElementById('someElement').className = 'NewClass';
eAmin
یک شنبه 21 مهر 1387, 09:48 صبح
عزیز من تنها راهش با جاوا اینه:



document.createStyleSheet('css/style.css');



راه دیگه ای هم نداره
سلام.

ببخشید، ولی شما از کجا فهمیدید، تنها راهشه و راه دیگه ای نداره؟؟؟
eAmin
یک شنبه 21 مهر 1387, 19:02 عصر
بله!!!

اگر فقط بخوایم، از تابع ها و متدهای جاوااسکریپت استفاده کنیم، 100% اینطور هست که شما می گین ولی راههای دیگه ای هم وجود داره یکیش که توی صفحه اول همین تاپیک هست.:چشمک:
http://barnamenevis.org/forum/showpost.php?p=594943&postcount=2
محمدامین شریفی
شنبه 28 دی 1387, 21:42 عصر
var styleNode = document.createElement('link');
styleNode.setAttribute('rel', 'stylesheet');
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(styleNode);

آقای حمیدرضا حالا اگر کاربر چندین بار خواست css را عوض کند مشکل بوجود نمیاد؟
محمدامین شریفی
شنبه 28 دی 1387, 22:18 عصر
تلفیقی از راه حل حمیدرضا جون و آقای tarhebartar در جهت cross browser شدن!




if(document.createStyleSheet) {
document.createStyleSheet('css/style.css');
}
else {
var styleNode = document.createElement('link');
styleNode.setAttribute('rel', 'stylesheet');
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(styleNode);
}
محمدامین شریفی
یک شنبه 29 دی 1387, 11:27 صبح
قبلا هم من توضیح داده بودم که کار اون کاربر و مشکلش حل شد.

باید با اجرا یک css به صورت ران تایم کارت رو انجام بدید.روش معمولش اینه من هم تا به حال توی چند تا از سایت ها ازش استفاده کردم و به خوبی کار می کنه.

منظورم همون کریت استایل شیت است
جناب tarhebartar این createstylesheet شما توی ff هم جواب میده؟
m.hamidreza
یک شنبه 29 دی 1387, 23:13 عصر
آقای حمیدرضا حالا اگر کاربر چندین بار خواست css را عوض کند مشکل بوجود نمیاد؟
چه مشکلی؟
روش ها متفاوت هست بهینه ترین رو انتخاب کن انجام بده. واسه اینکه بفهمی کدوم روش بهترینه گوگل بهترین کمک رو میتونه بهت بکنه.
محمدامین شریفی
دوشنبه 30 دی 1387, 09:37 صبح
چه مشکلی؟
روش ها متفاوت هست بهینه ترین رو انتخاب کن انجام بده. واسه اینکه بفهمی کدوم روش بهترینه گوگل بهترین کمک رو میتونه بهت بکنه.
فکر کنم منظورم را درست نگفتم.
فرض کنید این کد ما درون bottom press صفحه قرار دارد که برای تعویض style صفحه بکار میرود،هنگامی که کاربر میخواهد قالب صفحه را تعویض کند بر روی این دکمه فشار میدهد،حالا اگر کاربر چند بار اقدام به تعویض قالب کند این کد چند بار به head ما اضافه میشود.همانطور که میدانید این link ها به صورت آرایه به صفحه اضافه میشوند،من میگویم چگونه حالا ما میتوانیم این آرایه را تشخیص و کنترل نماییم؟،ایا هر دفعه فقط در اندیس صفر کپی میشود؟
آیا بعدش نیازی هست با کد sahele_sheni جان کنترلش کنیم؟


var i, link_id ;
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_id[i]. userID) {
link_id[i].disabled = true ;
if (link_tag[i].id == userID) {
link_id[i].disabled = false ;
}
}

ممنون