Добавить класс при определенном размере картинки

ShumNo · April 30, 2013

Ребят, подскажите, пожалуйста.

есть картинка

<img width="280" height="170" class="img" src="[url="http://img/kartinka.jpg%22>"]http://img/kartinka.jpg">[/url]

Хотел бы сделать следующую вещь: если картинка меньше по ширине скажем 600 пикселей то добавить дополнительный класс в тег картинке

<img width="280" height="170" class="img sub_class" src="[url="http://img/kartinka.jpg%22>"]http://img/kartinka.jpg">[/url]

Edited April 30, 2013 by ShumNo

s0rr0w · April 30, 2013

Ребят, подскажите, пожалуйста.
есть картинка
Хотел бы сделать следующую вещь: если картинка меньше по ширине скажем 600 пикселей то добавить дополнительный класс в тег картинке

Обратиться к атрибуту with, сравнить его с нужным числом

potato · April 30, 2013

примерно так:


<!doctype html>
<html lang="en-us">
<head>
  <title>Your title</title>
  <meta charset="utf-8">
  <style>
  #container {
   width: 500px;
   margin: 0 auto;
  }
  img {
   display: block;
   margin: 0 auto;
   border: solid 2px black;
  }
</style>
</head>
<body>
<div id="container">
<img src="http://lorempixel.com/output/food-h-c-463-480-5.jpg" class="my_image">
</div>
<script>
var image = document.getElementsByClassName('my_image')[0];
if(image.width < 600) {
  image.className = "smaller_than_600px";
}
alert("my_image new class name is: " + image.className);
</script>
</body>
</html>

ShumNo · April 30, 2013

Логику то я понимаю, что надо сравнить меньше ли число, я не знаю, как это выразить в js (

В общем-то да, я бы хотел, чтобы мне написали код, если он из пары строк.

Быть может мне помогут

примерно так:


<!doctype html>
<html lang="en-us">
<head>
<title>Your title</title>
<meta charset="utf-8">
<style>
#container {
width: 500px;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
border: solid 2px black;
}
</style>
</head>
<body>
<div id="container">
<img src="http://lorempixel.com/output/food-h-c-463-480-5.jpg" class="my_image">
</div>
<script>
var image = document.getElementsByClassName('my_image')[0];
if(image.width < 600) {
image.className = "smaller_than_600px";
}
alert("my_image new class name is: " + image.className);
</script>
</body>
</html>

Браво! Моя большая благодарность! Это чудесно! именно то что я хотел! Я в восторге одним словом!

Sign In

Добавить класс при определенном размере картинки

Question

ShumNo

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

potato

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information