Помогите с Java Script

Статус
В этой теме нельзя размещать новые ответы.
S

shell

Прохожие
Задача определить резолюцию экрана и если ширина 1024 и меньше, то изменить некое значение в CSS файле.

Пока делаю так, создаю и подгружаю целый файл ради одного значения:
HTML: 
<script type="text/JavaScript"> 
 if(screen.width <= 1024){ 
  document.write('<link href="/css/1024.css">'); 
}

Но, хотелось бы узнать как можно через java-у обратиться к css файлу заменить в нём значение width.
Например .my_class {width: 300px;}, а если резолюция 1024 то пусть будет .my_class {width: 100px;}
 
через попу как то все это

вариант
css
HTML: 
.res1024
{
   width : 1024px;
}

.res1024 div
{
  width : 612px;
}


.res800
{
   width : 800px;
}

.res800 div
{
  width : 400px;
}

ну и в onload добавить вставку класса .res1024 или .res800 в зависимости от разрешения, соответственно все внутренние div отресайзятся как надо
 
Нет, спасибо, решений через попу мне не надо.

Еще раз повторю свой вопрос:

В файле CSS написано:
.my_class {width: 300px;}

Если ширина экрана 1024 и меньше, то заменить значение width на другое. Например на 100.
.my_class {width: 100px;}
 
вот такое решение есть
HTML: 
<style>
.my_class {width: 300px;}
</style>
<script type="text/javascript" src="jquery_min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	if(window.screen.width<1000)
		$('.my_class').css('width', '100px');
});
</script>
<body>
<div style="background-color:#eeeeee" class=my_class>test</div>
 
О-о спасибо, супер!

А есть ли подобное без подгрузки допoлнительных библиотек и фреймворков ?
 
Не нужно никаких jquery. Сделай вместо класса id и используй getElementById.

HTML: 
<script type="text/JavaScript"> 
 if(screen.width <= 1024){ 
  getElementById("my_class").style.width=300;
}
 
Жаль, не работает данный скрипт.

Использовал и getElementByClass и
переделывал класс в id с getElementById, но не работает.

Было бы идеально без jquery. Подскажите пожалуйста еще.
 
можно вот так ....
но тут мы сам класс уже не трогаем, а меняем только дивы с этим классом, что почти одно и тоже


HTML: 
if(window.screen.width>1000){
	var coll = document.getElementsByTagName("div");
	for(var i=0; i<coll.length; i++)
	{
	  if(coll[i]['className']=='my_class')
	  	coll[i].style.width = "100px";
	}
}
 
Не работает и этот вариант.
 
а где не работает? и что пишет?

я протестил в ie6, opera9, firefox3
везде работает
HTML: 
<style>
.my_class {width: 300px;}
</style>

<body>
<div style="background-color:#eeeeee" class=my_class>test</div>
</body>
</html>
<script type="text/javascript">
if(window.screen.width<1000){
	var coll = document.getElementsByTagName("div");
	for(var i=0; i<coll.length; i++)
	{
	  if(coll[i]['className']=='my_class')
	  	coll[i].style.width = "100px";
	}
}
</script>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху