css Question posted in
Some basic documentation can be found here.

How to target object image to style it with CSS?

I have an array of 6 objects which are 6 images. I have rendered those images in a HTML table through JS code. Now I would like to target and style only ONE of them. Width, height, and so on.

How to do that in the most simple way as possible?

I tried to write a style key in the object with CSS code. Did not work.

I tried to getElementbyId on the specific img but it did not work either.

I have checked on other topics but what I’ve read, so far was really for complicated for what I want to do. I just want to change the size of ONE image.

const products = [{
    "id": 1,
    "image": "https://via.placeholder.com/50",
    "name": "Orient Vita Pro 28"",
    "price": "284.00",
    "inventory": 4,
    "productCode": "K203"
  },
  {
    "id": 2,
    "image": "https://via.placeholder.com/50",
    "name": "Orient S-400 26"",
    "price": "198.00",
    "inventory": 14,
    "productCode": "K433"

  },
  {
    "id": 3,
    "image": "https://via.placeholder.com/50",
    "name": "Bullet Bora 20"",
    "price": "350.00",
    "inventory": 7,
    "productCode": "K012"
  },
  {
    "id": 4,
    "image": "https://via.placeholder.com/50",
    "name": "Feder handmade",
    "price": "790.00",
    "inventory": 5,
    "productCode": "G0127"
  },
  {
    "id": 5,
    "image": "https://via.placeholder.com/50",
    "name": "Ibanez G120",
    "price": "430.00",
    "inventory": 2,
    "productCode": "G1233"
  },
  {
    "id": 6,
    "image": "https://via.placeholder.com/50",
    "name": "Feder Blues edition",
    "width": "1000",
    "price": "650.00",
    "inventory": 6,
    "productCode": "G4478"
  }
];

const placeholder = document.querySelector("#data-output");
let out = "";

for (let product of products) {
  out += `
            <tr>
                <td> <img src='${product.image}'> </td>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.inventory}</td>
                <td>${product.productCode}</td>
            </tr>
        `;
}

placeholder.innerHTML = out;
<table>
  <thead>
    <tr>
      <th>Image</th>
      <th>Product name</th>
      <th>Price</th>
      <th>inventory</th>
      <th>Product code</th>
    </tr>
  </thead>
  
  <tbody id="data-output">
  </tbody>
</table>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Firstly, the code i wrote with 'const products =' does not work a Json file. I need to delete the 'const products =' (see print img attached)[Json file][1]. Which is why i deleted it. Sorry about that. Second, as you can see, the style property you add with 'width' and 'border' attribute does not work either. So my problem is not solved unfortunately. [1]: https://i.sstatic.net/XIJhmRjc.jpg

    To answer the other comments, I would like to add a class to a specific image but i can't figure out how? Please let me know if you 're able to do that. I just would like to know how to target ONE image with CSS so i can style it the way i want. Does not matter which image.

    I have tried to use the img:nth-child() CSS pseudo-selector but it would target several img, and i only want to target one image.

    Please let me know if you come up with something.


  2. 0

    You weren’t clear about why a style property wouldn’t work. Seems like it would.

    const products = [{
    "id": 1,
    "image": "https://via.placeholder.com/50",
    "name": "Orient Vita Pro 28"",
    "price": "284.00",
    "inventory": 4,
    "productCode": "K203"
  },
  {
    "id": 2,
    "image": "https://via.placeholder.com/50",
    "name": "Orient S-400 26"",
    "price": "198.00",
    "inventory": 14,
    "productCode": "K433",
    "styles": { // <----------------------------------- HERE
      width: "25px",
      border: "2px solid orange"
    }
  },
  {
    "id": 3,
    "image": "https://via.placeholder.com/50",
    "name": "Bullet Bora 20"",
    "price": "350.00",
    "inventory": 7,
    "productCode": "K012"
  },
  {
    "id": 4,
    "image": "https://via.placeholder.com/50",
    "name": "Feder handmade",
    "price": "790.00",
    "inventory": 5,
    "productCode": "G0127"
  },
  {
    "id": 5,
    "image": "https://via.placeholder.com/50",
    "name": "Ibanez G120",
    "price": "430.00",
    "inventory": 2,
    "productCode": "G1233"
  },
  {
    "id": 6,
    "image": "https://via.placeholder.com/50",
    "name": "Feder Blues edition",
    "width": "1000",
    "price": "650.00",
    "inventory": 6,
    "productCode": "G4478"
  }
];

const placeholder = document.querySelector("#data-output");
let out = "";

products.forEach(product => {
  let styleStr = '';

  if (product.styles) {
    Object.entries(product.styles).forEach(([key, value]) => {
      styleStr += key + ': ' + value + '; '
    });
  }

  out += `
            <tr>
                <td> <img src='${product.image}' style='${styleStr}'> </td>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.inventory}</td>
                <td>${product.productCode}</td>
            </tr>
        `;
});

placeholder.innerHTML = out;
    <table>
  <thead>
    <tr>
      <th>Image</th>
      <th>Product name</th>
      <th>Price</th>
      <th>inventory</th>
      <th>Product code</th>
    </tr>
  </thead>

  <tbody id="data-output">
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search