مرحبا
عندي موقع وبدي اغير استايله
لما يضفط اليوزر على مربع لونه احمر يتغير استايل الموقع ويصير باللون الاحمر وهكذا
جدول فيه كذا لون لما يضفط اليوزر على لون يغير الاستايل
انا ابغى الكود
سويت عددت نسخ من الصور بالالوان وسويت استايلات جديده بس الكود اللي ما اعرفه
الكود ابيه بالجافا سكربت لا هنتوا
ممكن تستخدم jQuery ، لتغيير "ستايل" عنصر ما .. ويمكن بتنظيم كودك يكون التغيير جداً بسيط ، مثال :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div_1").click(function(){
$("#container").removeClass("style_2");
$("#container").addClass("style_1");
});
$("#div_2").click(function(){
$("#container").removeClass("style_1");
$("#container").addClass("style_2");
});
});
</script>
<style>
.style_1{
background-color:black;
}
.style_1 > p{
color:yellow;
}
.style_2{
background-color:red;
}
.style_2 > p{
color:white;
}
</style>
<title></title>
</head>
<body >
<div id="div_1" style="position: relative;float:left;left:0;top:0;width:50px;height:50px;background-color:black;cursor: pointer;"></div>
<div id="div_2" style="position: relative;clear:right;left:100px;top:0;width:50px;height:50px;background-color:red;cursor: pointer;"></div>
<div id="container" class="style_1">
<p> test</p>
</div>
</body>
</html>جرب تضغط على المربع الأحمر أو الأسود ، وسيتغير الستايل ، وبتنظيم css يمكن أن يكون كود جافاسكربت بسيط ..
هذه الطريقة التي أعرفها وممكن تكون فيه طريقة أسهل !
تطبيق طمأنينة ، نسخة بيتا على أندرويد
عبدالله الشمّري - Al-Shammari
twitter @abshammeri
abshammeri AT gmail.com
github : abshammeri
باستخدام Javascript (أو jQuery إن كنت تستخدم المكتبة لأغراض أخرى) يمكن تغيير قيمة الـ href property في LINK tag أو محتوى الـ STYLE tag مع استخدام @import.
في كلتا الحالتين، لا أعلم إن كانت التغييرات ستكون فورية بدون الحاجة لتحديث (التحديث سيلغي القيم، مما يعني أننا بحاجة لاستخدام cookie مثلاً لمعرفة الستايل المطلوب).
تحديث:
قمت بتطبيقها في المثال التالي:
صفحة test.html:
<html>
<head>
<style id="myStyle">
@import 'theme1.css'
</style>
<script>
function changeTheme(id)
{
document.getElementById('myStyle').innerHTML = "@import 'theme"+id+".css'";
}
</script>
</head>
<body>
<div style="width:100%"><a href="#" onClick="javascript:changeTheme(1);">Theme1</a> - <a href="#" onClick="javascript:changeTheme(2);">Theme2</a></div>
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
</body>
</html>ملف theme1.css في ذات المجلد:
table {border: 1px solid #000;}
td {border: 1px solid red;}ملف theme2.css في ذات المجلد:
table {border: 2px solid #000;}
td {border: 1px solid blue;}جرب الصفحة وستلاحظ أن النقر على الروابط في الأعلى تقوم بتغيير الستايل فوراً.
Do as I say, not as I do
We are Anonymous. We are Legion. We don't forgive. We don't forget
Xacker كتب:باستخدام Javascript (أو jQuery إن كنت تستخدم المكتبة لأغراض أخرى) يمكن تغيير قيمة الـ href property في LINK tag أو محتوى الـ STYLE tag مع استخدام @import.
في كلتا الحالتين، لا أعلم إن كانت التغييرات ستكون فورية بدون الحاجة لتحديث (التحديث سيلغي القيم، مما يعني أننا بحاجة لاستخدام cookie مثلاً لمعرفة الستايل المطلوب).
تحديث:
قمت بتطبيقها في المثال التالي:
صفحة test.html:
<html> <head> <style id="myStyle"> @import 'theme1.css' </style> <script> function changeTheme(id) { document.getElementById('myStyle').innerHTML = "@import 'theme"+id+".css'"; } </script> </head> <body> <div style="width:100%"><a href="#" onClick="javascript:changeTheme(1);">Theme1</a> - <a href="#" onClick="javascript:changeTheme(2);">Theme2</a></div> <table> <tr> <td>test1</td> <td>test2</td> </tr> <tr> <td>test3</td> <td>test4</td> </tr> </table> </body> </html>ملف theme1.css في ذات المجلد:
table {border: 1px solid #000;} td {border: 1px solid red;}ملف theme2.css في ذات المجلد:
table {border: 2px solid #000;} td {border: 1px solid blue;}جرب الصفحة وستلاحظ أن النقر على الروابط في الأعلى تقوم بتغيير الستايل فوراً.
ما تغير الاستايل
والمستعرض يفيد بوجود خطا في الصفحه
ما هو الحل
المشكلة في المتصفح Internet Explorer والخاصة innerHTML.
باقي المتصفحات المشهورة تعمل بشكل طبيعي.
Do as I say, not as I do
We are Anonymous. We are Legion. We don't forgive. We don't forget