Помогите с Java Script

Тема в разделе "Другие языки", создана пользователем shell, 8 апр 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. shell

    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;}
     
  2. vaad2

    vaad2 Постоялец

    Регистр.:
    18 дек 2006
    Сообщения:
    60
    Симпатии:
    9
    через попу как то все это

    вариант
    css
    HTML:
    .res1024
    {
       width : 1024px;
    }
    
    .res1024 div
    {
      width : 612px;
    }
    
    
    .res800
    {
       width : 800px;
    }
    
    .res800 div
    {
      width : 400px;
    }
    
    ну и в onload добавить вставку класса .res1024 или .res800 в зависимости от разрешения, соответственно все внутренние div отресайзятся как надо
     
  3. shell

    shell Прохожие

    Нет, спасибо, решений через попу мне не надо.

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

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

    Если ширина экрана 1024 и меньше, то заменить значение width на другое. Например на 100.
    .my_class {width: 100px;}
     
  4. serg_g

    serg_g Создатель

    Регистр.:
    31 окт 2008
    Сообщения:
    35
    Симпатии:
    9
    вот такое решение есть
    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>
     
  5. shell

    shell Прохожие

    О-о спасибо, супер!

    А есть ли подобное без подгрузки допoлнительных библиотек и фреймворков ?
     
  6. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    Не нужно никаких jquery. Сделай вместо класса id и используй getElementById.

    HTML:
    
    <script type="text/JavaScript"> 
     if(screen.width <= 1024){ 
      getElementById("my_class").style.width=300;
    }
    
     
  7. shell

    shell Прохожие

    Жаль, не работает данный скрипт.

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

    Было бы идеально без jquery. Подскажите пожалуйста еще.
     
  8. serg_g

    serg_g Создатель

    Регистр.:
    31 окт 2008
    Сообщения:
    35
    Симпатии:
    9
    можно вот так ....
    но тут мы сам класс уже не трогаем, а меняем только дивы с этим классом, что почти одно и тоже


    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";
    	}
    }
     
  9. shell

    shell Прохожие

    Не работает и этот вариант.
     
  10. serg_g

    serg_g Создатель

    Регистр.:
    31 окт 2008
    Сообщения:
    35
    Симпатии:
    9
    а где не работает? и что пишет?

    я протестил в 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>
     
Статус темы:
Закрыта.