1

Boa tarde. Quero mudar o css de uma div cujo id é igual ao id proveniente de uma base de dados. Como posso fazer isso? Posso usar php no css? Quero passar o id onde tem ? HTML

<div class="div_grande">
                        <?php
                            $sql = "SELECT idr, nome, video, img1, img2, img3, img4, img5, img6, telefone, morada, descricao, site FROM restaurantes WHERE fk_lingua = 1 AND fk_distrito = 3";
                            $result = $conn->query($sql);

                            if ($result->num_rows > 0) {
                                // output data of each row
                                while($row = $result->fetch_assoc()) { ?>
                                    <div class="conteudo_cima">
                                        <img class="img_cima" src="<?php echo $row['img1']; ?>">
                                        <div class="texto">
                                            <h1><?php echo $row['nome']."<br>";?></h1>
                                            <?php echo $row['descricao']."<br>";?>
                                            <?php echo $row['morada']."<br>";?>
                                            <?php echo $row['telefone']."<br>";?>
                                            <a href="http://<?php echo $row['site'];?>" target="_blank"><?php echo $row['site'];?></a>
                                        </div>
                                        <?php $id = $row['idr']; ?>
                                        <div class="seta">
                                            <img id="trigger" src="imagens/expand.png" onclick="abreInfo(event, $id)">
                                        </div>
                                    </div>
                                    <div id="<?php echo $id; ?>">
                                        <div class="video">
                                             <iframe src="<?php echo $row['video']; ?>"></iframe> 
                                        </div>
                                        <div class="galeria">
                                        <!-- GALERIA -->
                                        </div>
                                    </div>
                        <?php }
                            } else {
                                echo "0 resultados";
                            }
                        ?>
                    </div>

css

.?{
    position: relative;
    /*background-color: brown;*/
    width: 98%;
    margin-left: 1%;
    display: none;
}
.? .video{
    /*background-color: blue;*/
    position: relative;
    height: 100%;
    width: 50%;
}
.? .video iframe{
    height: 200px;
    width: 80%;
    margin-left: 10%;
}

JQUERY

function abreInfo(event, id){
            event.preventDefault();
            $("#"+id).toggle("slow");
        }
1
  • Pra cada id vai ser um css diferente? Como o sistema vai saber o que aplicar em cada um? Existem quantas variações de estilo da div que você quer aplicar? 25/05/2016 às 12:32

2 Respostas 2

1

Podes fazer assim:

CSS:

.id-da-bd {
   background-color: red;
}

HTML: Nota que não se deve usar id's numéricos

<div id="id_2" data-id="2" class="<?php if($id_da_bd == 2) {echo 'id-da-bd'; } ?>"></div>
0

Podes utilizar uma concatenação e criar um padrão que depois vais utilizar no css utilizando um selector que te diz que o id começa com a palavra.

Ex:

tens 3 ids

video_1
video_2
video_3

Para seleccionares as divs com este id terias que usar isto assim

div[id^=video]{
    position: relative;
    /*background-color: brown;*/
    width: 98%;
    margin-left: 1%;
    display: none;
}
div[id^=video] .video{
    /*background-color: blue;*/
    position: relative;
    height: 100%;
    width: 50%;
}
div[id^=video] .video iframe{
    height: 200px;
    width: 80%;
    margin-left: 10%;
}

Mais informação aqui:

https://www.w3.org/TR/css3-selectors/#attribute-substrings

E o teu js seria

function abreInfo(event, id){
            event.preventDefault();
            $("#video_"+id).toggle("slow");
        }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .