Подключение различных классов, в зависимости от переменной

@Mike_device · Регистрация: 11.05.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте, меня интересует, возможно ли сделать что-то подобное.
Я определяю высоту страницы вот таким скриптом:

Javascript

<script>
 
function getDocumentHeight()
{
   return (document.body.scrollHeight > 
 
document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
}
 
function getDocumentWidth()
{
   return (document.body.scrollWidth > 
 
document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
}
 
function init(){
var height= document.getElementById('h');
var width = document.getElementById('w');
height.value = getDocumentHeight();
width.value = getDocumentWidth();
}
</script>

Все определяется верно. Вот, мне нужно, чтобы при определенной высоте, скажем >1000px к тегу <table> подключился один класс, а при высоте <=1000 другой.
Спасибо!

z-z · 04.08.2013, 22:35

Javascript

function init(){
// твой код
var c = getDocumentHeight() > 1000 ? "class1" : "class2";
$('table').addClass(c);

Добавлено через 49 секунд
class1 подключается при высоте больше 1000, иначе подключается класс 2

@Soldado · 04.08.2013, 22:40

Или что-то типа такого

HTML5

<html>
  <head>
    <title>Новый класс </title>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
    
 <script type="text/javascript">
 $(function () {
$(window).scroll(function(){ 
 var ddd = $(window).scrollTop();
 if(ddd>=400){
    $('table').removeClass('startClass').addClass('newClass');
 }
 else{
    $('table').removeClass('newClass').addClass('startClass');
 }
 
});
           
 }); </script>
<style>
 
.startClass
{
width:300px;
background-color: red;
}
.newClass{
width:300px;    
background-color: yellow;   
}
</style>    
  </head>
  <body style="padding-top:640px; height:200%">
<table class="startClass" >
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
  </body>
</html>

@Mike_device · 04.08.2013, 22:59 **[ТС]**

z-z, а если меня много table, а мне нужно только к конкретному?

z-z · 04.08.2013, 23:01

Mike_device, дык покажите код свой... или дайте вашей таблице какой нибудь атрибут, по которому ее можно опознать... например id или class какой нибудь

@Soldado · 04.08.2013, 23:10

Для моего варианта
вместо

Javascript

1	$('table')

напишите

Javascript

1	$('#table1')

Задайте таблице этот id

@Mike_device · 05.08.2013, 19:39 **[ТС]**

z-z, Soldado, Спасибо Всем! Я решил проблему следующим образом

Javascript

<head>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
        <!--
            function getDocumentHeight(){
                return (document.body.scrollHeight > 
                    document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
            }
 
            function init(){
                var height = document.getElementById('h');
                    height.value = getDocumentHeight();
            
                if (height.value < 770) {
 
                    $(document).ready(function(){
                    $('.out_all_tags').removeClass('out_all_tags').addClass('out_all_tags_dark');
                        });
                    $(document).ready(function(){
                    $('.down_inside_td_left').removeClass('down_inside_td_left').addClass('down_inside_td_left_dark');
                        });
                    $(document).ready(function(){
                    $('.out_all_tags_small').removeClass('out_all_tags_small').addClass('out_all_tags_small_dark');
                        });
                    $(document).ready(function(){
                    $('.out_all_tags_medium').removeClass('out_all_tags_medium').addClass('out_all_tags_medium_dark');
                        });
                    $(document).ready(function(){
                    $('.out_all_tags_large').removeClass('out_all_tags_large').addClass('out_all_tags_large_dark');
                        });
 
                }
            }
        //-->
        </script>
 
</head>
 
<body onload = "init();" id = "h">

@Mike_device 6 / 5 / 6 Регистрация: 11.05.2013 Сообщений: 139
	04.08.2013, 22:59 [ТС]	4
	z-z, а если меня много table, а мне нужно только к конкретному? 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	04.08.2013, 23:01	5
	Mike_device, дык покажите код свой... или дайте вашей таблице какой нибудь атрибут, по которому ее можно опознать... например id или class какой нибудь 1

	05.08.2013, 19:39