web-dev-qa-db-fra.com

Variable Javascript en css

Je travaille sur une petite page HTML. J'utilise javascript pour obtenir les dimensions de l'écran. Je dois passer cette variable à un style CSS comme ci-dessous. Comment puis-je faire ceci? Je remarque également que je dois mettre le "px" à la fin de la valeur, comme top: 100px not top: 100 Comment puis-je ajouter cela à ma variable aussi? Merci pour toute aide

<script type="text/javascript">
    var percent =1;
    var myWidth = Math.round( screen.width * percent);
    var myHeight = Math.round( screen.height * percent);
</script>

<style type="text/css">
    div.content {
margin: auto;
top: myHeight ;
width: myWidth ;
    }
</style>
javascripthtmlcssvariables
8
fghajhe

Si vous avez l’intention d’utiliser LESS CSS vous pouvez essayer ceci: 

    @percent: 1;
    @height: `Math.round( screen.height * @{percent})`;
    @width: `Math.round( screen.width * @{percent})`;
    div.content {
    margin: auto;
    top: @height;
    width: @width;
    }

Si vous avez l'intention d'utiliserJQUERY, vous pouvez essayer ceci: 

var percent=1;
$("div.content").css('top', Math.round( screen.height * percent)+'px');
$("div.content").width(Math.round( screen.width * percent));

Si vous avez l'intention d'utiliserJS, vous pouvez essayer ceci: 

var percent=1;
document.querySelector('div.content').style.top = Math.round( screen.height * percent)+'px';
document.querySelector('div.content').style.width = Math.round( screen.width * percent)+'px';
10
Robin Rizvi

Avec JS pur, vous pouvez obtenir toutes les divs via getElementsByTagName , puis filtrer pour un nom de classe content. 

Pour les nouveaux navigateurs (plus spécialement pour IE):

Ensuite, pour chaque correspondance, faites:

currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;
4
Joseph
var myCss = "div.content { margin: auto; top: " + 
    myHeight + "; width: " + myWidth + " ; }";

var myStyle = document.createElement('style');
myStyle.type = 'text/css';
myStyle.styleSheet ? myStyle.styleSheet.cssText = myCss : 
    myStyle.appendChild(document.createTextNode(myCss));

document.getElementsByTagName("head")[0].appendChild(myStyle);

Cela crée l'élément de style que vous avez décrit et l'ajoute à l'en-tête du document, en l'appliquant.

3
user2279235

jQuery fonctionne avec tous les navigateurs, même Internet Explorer, mais vous avez besoin de jQuery. Le JavaScript fonctionne avec tous les navigateurs, à l'exception d'Internet Explorer. Vous pouvez également utiliser du CSS pur, qui fonctionne lorsque JavaScript est désactivé. Essayez celui qui vous convient le mieux :).

JavaScript

var width = body.offsetWidth;
var height = body.offsetHeight;
var _content = document.querySelectorAll(".content");
content.style.width = width + "px";
content.style.height = height + "px";

Ou jQuery

var width = $(document).width();
var height = $(document).height();
var _content = $('.class');
content.style.width = width + "px";
content.style.height = height + "px";

Ou CSS

.content {
    margin:auto;
    top:100%;
    width:100%;
}
1
Qvcool

Aussi, vous pouvez envisager d'utiliser quelque chose comme MOINS Vous ne savez pas si c'est une option pour vous ou non.

0
Brandon Tripp