необходимость атрибута класса, чтобы расположить div-слой

Мне трудно понять, почему (а не как) необходимо иметь атрибут класса, назначенный div, чтобы изменить его положение. Например, следующий код не переместит div на 200 200:

this.m_textLayer = document.createElement( 'div' ); 
this.m_textLayer.setAttribute( 'id', 'textLayer' ); 
this.m_textLayer.setAttribute( 'position', 'absolute' ); 
this.m_textLayer.setAttribute( 'left', '0px' ); 
this.m_textLayer.setAttribute( 'top', '0px' ); 
this.m_textLayer.setAttribute( 'width', '300px' ); 
this.m_textLayer.setAttribute( 'height', '100px' ); 
this.m_baseLayer.appendChild( this.m_textLayer );
$( '#textLayer' ).append( $( 'p' ) ).text( 'test' );
// some time later
$( '#textLayer' ).css( { left:'200px', top:'200px' } ); 

но наличие атрибута «class» указывает на определение класса в CSS с одинаковыми атрибутами, работает как и ожидалось:

this.m_textLayer = document.createElement( 'div' ); 
this.m_textLayer.setAttribute( 'id', 'textLayer' ); 
this.m_textLayer.setAttribute( 'class', 'Layer' ); 
this.m_baseLayer.appendChild( this.m_textLayer );
$( '#textLayer' ).append( $( 'p' ) ).text( 'test' );
// some time later
$( '#textLayer' ).css( { left:'200px', top:'200px' } ); 

Теперь я могу рассказать о причине, поскольку это, вероятно, связано с тем, что не существует стиля css, определенного, когда класс attr не установлен или что-то в этом роде, но может кто-то объяснить его мне подробно или указать на какой-то ресурс, который объясняет точно, что на самом деле происходит здесь? (Я определенно не новичок в программировании, но я новичок в css/js/jquery и затрудняюсь найти информацию о реальной механике js-интерпретации).

1
nl ja de

3 ответы

Мне трудно понять, почему (а не как) необходимо иметь атрибут класса, назначенный div, чтобы изменить его положение.

Это не так. Вы устанавливаете атрибуты с именами, такими как position и left ), но это не атрибуты, они являются свойствами стиля. Итак, измените:

this.m_textLayer.setAttribute( 'position', 'absolute' ); 
this.m_textLayer.setAttribute( 'left', '0px' ); 
this.m_textLayer.setAttribute( 'вp', '0px' ); 
this.m_textLayer.setAttribute( 'width', '300px' ); 
this.m_textLayer.setAttribute( 'height', '100px' ); 

в

this.m_textLayer.style.position = 'absolute' ; 
this.m_textLayer.style.left = '0px'; 
this.m_textLayer.style.вp = '0px'; 
this.m_textLayer.style.width = '300px'; 
this.m_textLayer.style.height = '100px'; 

Примечание:

Поскольку вы используете jQuery, вы можете сделать это так:

this.m_textLayer = $( '<div>' )
                   .attr( 'id', 'textLayer' )
                   .css({
                       position: 'absolute',
                       left:     '0px',
                       вp:      '0px',
                       width:    '300px',
                       height:   '100px'
                   })
                   .append( $( 'p' ) )
                   .text( 'test' )
                   .appendв(this.m_baseLayer)[0];

// some time later
$( '#textLayer' ).css( { left:'200px', вp:'200px' } ); 
4
добавлено
@JochemVanDerSpek: Рад, что помогло!
добавлено автор T.J. Crowder, источник
Единственное изменение стиля: $ ('# div'). CSS ('left', '10px'); и несколько изменений стиля; $ ('# div'). CSS ({'left': '10px', 'width': '300px'});
добавлено автор ProfileTwist, источник
Рекомендовать эту книгу jQuery - books.google.com/books/about/&hellip ;
добавлено автор ProfileTwist, источник
О, черт возьми, я чувствую себя немного глупо здесь. я чувствовал, что CSS устанавливает атрибуты, но это не так. Это, безусловно, проясняет ситуацию! : о
добавлено автор Jochem Van Der Spek, источник

Кажется, вы смешиваете JavaScript и jQuery для выполнения той же работы, а не на 100% уверены, почему?

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

В настоящее время вы строите что-то вроде:


Попробуй это:

var m_baseLayer = document.getElementById('baselayer');
this.m_textLayer = document.createElement( 'div' ); 
this.m_textLayer.setAttribute( 'id', 'textLayer' ); 
this.m_textLayer.style.position = 'absolute' ; 
this.m_textLayer.style.left = '0px'; 
this.m_textLayer.style.top = '0px'; 
this.m_textLayer.style.width = '300px'; 
this.m_textLayer.style.height = '50px'; 
this.m_textLayer.style.background = 'green'; 
m_baseLayer.appendChild( this.m_textLayer );​

See: http://jsfiddle.net/GPkMk/

1
добавлено

Попробуй это:

this.m_textLayer.style.position = 'absolute'; 
this.m_textLayer.style.left = '0px'; 
this.m_textLayer.style.top = '0px'; 
this.m_textLayer.style.width = '300px'; 
this.m_textLayer.style.height = '100px';

Он не использует класс, но скорее устанавливает стили inline для элемента. То, что вы делаете, - это атрибуты, а не стили. Многие из этих атрибутов вообще не существуют, поэтому браузер просто игнорирует их.

Продукт вашего кода с точки зрения DOM выглядит следующим образом:

<!-- Assuming m_textLayer is a DIV -->
<div position="absolute" left="0px" top="0px" width="300px" height="300px" />

Продукт стилей настройки:

<!-- Assuming m_textLayer is a DIV -->
<div style="position: absolute; left: 0px; top: 0px; width: 300px; height: 300px" />
1
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)