Function if you change css

Question

Good afternoon! I have a filter on my site that shows certain partners of my company, but whenever I select a filter that has few logos of the partners the Divs are all left.

I need a function that changes a specific attribute of my css when the person makes a filter so the images are centered.

Example: Clicked on filter by "Security" segment, be changed in CSS the attribute "width: 16.6%" to "width: 50.0%".

I am layman in programming yet so it was myself who tried to make the script below, I’m not sure if the reasoning is right.

Index (filter button):

<li><a href="#" data-filter=".seguranca">Segurança</a></li>

CSS (main.css):

#portfolio .portfolio-item {width: 16.6%;}

Script:

<script>
function(teste)
if (data-filter == .seguranca) {set style '.\main.css' = '.portfolio-item', width=50.0%}
</script>

Image (Partner):

<div class="portfolio-item seguranca">
   <div class="portfolio-item-inner">
      <img src="./images/imagem.png">
   </div>
</div>

Answer 1

Dude has some details in his code, first you have to do a preventDefault on the link you will click for it not to change anything on the page. After that on data-atributi you put a . in front of the name ". security", do not need that point ai.

Then in the click function you make a setAttribut and changes the width from 16% to 50%

const btn = document.querySelector('[data-filter="seguranca"]');

function troca(e) {
e.preventDefault();
const img = document.querySelectorAll('.portfolio-item.seguranca');
img.forEach( function (e) {
    e.setAttribute("style", "width: 50%;")
})
}

btn.addEventListener('click', troca);

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
[data-filter="seguranca"] {
    color: red;
}
.portfolio-item  {
    width: 16%;
    border: 1px solid #000;
    box-sizing: border-box;
    float: left;
}
.portfolio-item  img {
    width: 100%;
    display: block;
}

<ul>
  <li><a href="#" data-filter="seguranca">Segurança</a></li>
</ul>

<div class="portfolio-item seguranca">
  <div class="portfolio-item-inner">
     <img src="https://unsplash.it/100/100">
  </div>
</div>
<div class="portfolio-item seguranca">
  <div class="portfolio-item-inner">
     <img src="https://unsplash.it/100/100">
  </div>
</div>

Answer 2

Using pure javascript I would do so:

function changeWidth() {
   let divItem = document.querySelector('.portfolio-item img');
   divItem.style.width = "50%";
}

.portfolio-item img {
  background: yellow;
  width: 16.6%;
}

<li><a href="#" data-filter=".seguranca" onClick="changeWidth()">Segurança</a></li>


<div class="portfolio-item seguranca">
   <div class="portfolio-item-inner">
      <img src="https://dqzrr9k4bjpzk.cloudfront.net/images/16753616/1031279012.jpg">
   </div>
</div>

Answer 3

You can do this way, where you will "filter" and change the width of Ivs according to attribute value data-filter link clicked (see comments in the code):

// seleciona todos os links da ul
const filtro = document.querySelectorAll("#filtros a");
for(let i of filtro){
   i.onclick = function(e){
      e.preventDefault(); //  cancela a ação do click no link
      let f = this.dataset.filter; // pega o valor do atributo data-filter
      // seleciona todas as divs com a classe do atributo data-filter
      const dvs = document.querySelectorAll("#portifolio ."+f);
      // aplica a propriedade nas respectivas divs
      for(let d of dvs) d.style.width = "50%";
   }
}

#portifolio { width: 300px; }
#portifolio .portfolio-item {width: 16.6%;}
#portifolio .portfolio-item img {width: 100%;}
.portfolio-item-inner{ display: flex; align-items: center; }

<ul id="filtros">
   <li><a href="#" data-filter="seguranca">Segurança</a></li>
   <li><a href="#" data-filter="outra">Outra</a></li>
</ul>

<div id="portifolio">
   <div class="portfolio-item seguranca">
      <div class="portfolio-item-inner">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> Segurança
      </div>
   </div>
   <div class="portfolio-item outra">
      <div class="portfolio-item-inner">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> Outra
      </div>
   </div>
   <div class="portfolio-item seguranca">
      <div class="portfolio-item-inner">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> Segurança
      </div>
   </div>
</div>