11. Атрибути, css властивості, розміри і координати

Встановлення та отримання атрибутів і розмірів, отримання координат, зміна/встановлення css властивостей

.attr("iм'я_атрибуту") - отримання значення атрибуту
.attr("iм'я_атрибуту","значення_атрибуту") - встановлення нового значення атрибуту
.attr({"iм'я_атрибуту":"значення","iм'я_атрибутe":"значення"}) - встановлення нового значення списком
.css({"iм'я_властивості":"значення","iм'я_властивості":"значення"}) - зміна властивостей стилю
.removeAttr("им'я_атрибуту") - видалення атрибуту
.width() - отримуємо ширину (якщо в дужках нічого не вказано) або, вказав, встановлюємо ширину
.height() - отримуємо висоту (якщо в дужках нічого не вказано) або, вказав, встановлюємо висоту
.offset() - отримуємо абсолютні координати об'єкту

Приклади

.attr("iм'я_атрибуту"),.attr("iм'я_атрибуту","значення_атрибуту")

<div  class="dv2">.dv7
    <div data="220B">Клікай</div>
</div>

.dv2

Клікай

При кліку по вкладенимо в .dv2 блоку отримуємо його атрибут data="220B", виводимо в середині блоку

$('.dv2 div').click (function(){
		     var atrd= $(this).attr('data');
	 $(this).text(atrd);
});

Встановлюемо нове значення data="380B" для блоку знову клікаємо по жовтому блоку

$('#btn').click (function(){
	 $('.dv7 div').attr('data','380B');
});

.attr({"iм'я_атрибуту":"значение","iм'я_атрибутe":"значення"})

<div  class="dv1">.dv1
    
</div>

По кліку змінеться курсор та з'явиться напис поруч з ним в title - встановлюємо йому атрибути style="cursor:pointer" title="myblock"

.dv1

$('.dv1 div').click (function(){
	$(this).attr({'style':'cursor:pointer','title':'myblock'});
});

.removeAttr("им'я_атрибуту")

<div  class="dv7">.dv7
    <div style="cursor:pointer"></div>
</div>

По кліку видаляємо атрибут style="cursor:pointer"

.dv7

$('.dv7 div').click (function(){
		     $(this).removeAttr('style');
});

.css({"iм'я_властивості":"значення","iм'я_властивості":"значення"})

<div  class="dv7">.dv7
    <div style="cursor:pointer"></div>
</div>

По кліку встановлюємо властивість сss ('cursor','wait'} (для першого блоку) та ({'bоrder':'3px solid red','cursor':'move'}) (для останнього блоку)

.dv7

cursor:wait

border,
cursor

$('.dv7 div:first').click (function(){
	     $(this).css('cursor','wait');
});

$('.dv7 div:last').click (function(){
	   $(this).css({'border':'1px solid red','cursor':'move'});
});

.width()

<div  class="dv7">.dv7
    <div></div>
</div>

По кліку встановлюємо нове значення ширини і отримуємо його для виводу -

.dv7

$('#dv7 div').click (function(){
		     $(this).width(700); // встановлюємо
		            var newW = $(this).width();// отримуємо
		            $('#inf').text(newW);
});

.height()

<div  class="dv7">.dv7
    <div></div>
</div>

По кліку встановлюємо нове значення висоти і отримуємо його для виводу -

.dv7

$('#dv7 div').click (function(){
		     $(this).height(50); // встановлюємо
		            var newH = $(this).height();// отримуємо
		            $('#inf').text(newH);
});

.offset()

<div  class="dv7">.dv7
    <div></div>
    <div></div>
</div>

По кліку по блоку отримуємо його абсолютні координати для виводу -

.dv7

Координати зберігаються у властивостях oб'єкту ofs.top та ofs.left

$('.dv7 div').click (function(){
		     var ofs = $(this).offset();// отримуємо
		     $('#inf').text("Координати - top: "+ofs.top+"; left: "+ofs.left+".");
});

далі ✏