Как изменить свойства CSS (высота ширина) элемента div с помощью JQuery? - PullRequest
2 голосов
/ 20 августа 2009

Почему это не создает вертикальную полосу шириной 5 пикселей на боковой стороне окна?

<html>
<head runat="server">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $("#scrollBar").css({
                height: $(window).height,
                width: 5,
                position: "absolute",                
                top: 0,
                left: $(window).width - 5,
                margin: 0
            });
        });

    </script>
</head>
<body>
    <div id="scrollBar" style="background-color: Red">test
    </div>
</body>
</html>

Ответы [ 5 ]

6 голосов
/ 20 августа 2009

Используйте это вместо:

Я обнаружил несколько проблем:

  • вместо $(window).height, используйте $(window).height()
  • вместо left: $(window).width - 5, используйте right: 0

    $(document).ready(function() {
        $("#scrollBar").css({
            height: $(window).height(),
            width: 5,
            position: "absolute",                
            top: 0,
            right: 0,
            margin: 0
        });
    });
    
1 голос
/ 20 августа 2009

Из прочтения документации jQuery вы можете видеть, что вам нужно поместить свойства css и их значения в виде строковых значений.

 $("#scrollBar").css({
                'height': $(window).height(),
                'width': '5px',
                'position': 'absolute',                
                'top': '0',
                'left': $(window).width() - 5,
                'margin': '0'
            });

http://docs.jquery.com/CSS/css#properties

Я не совсем уверен, как бы вы отобразили эти рассчитанные значения.

PS: Джонатас был прав, высота и ширина - это функции, а не свойства.

1 голос
/ 20 августа 2009

Также обратите внимание, что .Query .width и .height должны быть .width () и .height ().

Примеры использования ...

1 голос
/ 20 августа 2009

вы можете поставить «5px» вместо 5 для ширины и $ (window) .height () + «px» для высоты и ($ (window) .width () - 5) + «px» слева.

0 голосов
/ 20 августа 2009

Вместо left: $(window).width - 5, вы можете попробовать right: 0.

РЕДАКТИРОВАТЬ: Да, это было довольно глупо. Но, если я не ошибаюсь, они также должны быть заключены в кавычки, как в 'width': '5px' ,.

  $("#scrollBar").css({
    'height': $(window).height(),
    'width': '5px',
    'position': 'absolute',
    'top': 0,
    'right': 0,
    'margin': 0
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...