Wie berechnet man den Wert der Boxen px?

Question

Gesamtbreite der bar = 500px, rotes Feld = 1, gelber Kasten = 1, green box = 2,

CSS:

.box { 
     float:left; 
     width:150px; 
     box-shadow:3px 3px 2px #666767; 
     height:30px; 
    } 
.red { 
     background-color:#ff0000; 
     width:150px;     
    } 
.yellow {   
     background-color:#ffff00; 
     width:200px; 
     } 
.green { 
     background-color:#00ff00; 
     width:50px; 
     } 

HTML-Code:

content += "<div class=\"box-container\"> 
       <div class=\"box red\"> 
       </div> 

       <div class=\"box yellow\"> 
       </div> 

       <div class=\"box green\"> 
       </div> 
      </div> 
     </br>"; 

Daraus möchte ich die Breite der Box in px für die Redbox, Yellowbox und Greenbox berechnen.

Answer 1

Sie können Breite der Box folgenden Weg mit JQuery finden.

width1 = $(".red").width(); 
 
width2 = $(".yellow").width(); 
 
width3 = $(".green").width(); 
 

 
totalWidth = width1 + width2 + width3; 
 
alert(totalWidth);

.box { 
 
    float: left; 
 
    width: 150px; 
 
    box-shadow: 3px 3px 2px #666767; 
 
    height: 30px; 
 
} 
 

 
.red { 
 
    background-color: #ff0000; 
 
    width: 150px; 
 
} 
 

 
.yellow { 
 
    background-color: #ffff00; 
 
    width: 200px; 
 
} 
 

 
.green { 
 
    background-color: #00ff00; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box-container"> 
 
    <div class="box red"></div> 
 
    <div class="box yellow"></div> 
 
    <div class="box green"></div> 
 
</div>

Working Fiddle

Answer 2

Ich habe ein paar Änderungen an der HTML und CSS, weil es nicht für mich zu arbeiten schien, aber here ist ein console.log mit der rechten px Werte.

<div class="box"> 
    <div id="red" class="color"> 
    </div> 

    <div id="yellow" class="color"> 
    </div> 

    <div id="green" class="color"> 
    </div> 
    </div> 

CSS

.box { 
    float:left; 
    width:500px; 
    background-color: white 0; 
    box-shadow:3px 3px 2px grey; 
    height:30px; 
}  
#red { 
    background-color:red; 
    width:25%; 
    height:100%; 
     float: left; 
} 
#yellow {   
    background-color:yellow; 
    width:25%; 
    height:100%; 
    float:left; 
    } 
#green { 
    background-color: #00ff00; 
    width: 50%; 
    height: 100%; 
    float: left; 
    } 

Javascript

function getWidth(){ 
    var redWidth = $("#red").width(); 
    var greenWidth = $('#green').width(); 
    var yellowWidth = $('#yellow').width(); 
    console.log(redWidth, yellowWidth, greenWidth); 
} 
getWidth(); 

Answer 3

var redWidth = document.getElementsByClassName("red").offsetWidth; 
var yellowWidth = document.getElementsByClassName("yellow").offsetWidth; 
var greenWidth = document.getElementsByClassName("green").offsetWidth; 

Answer 4

habe ich die einfachen Berechnungen und den Wert für die Breite festgelegt.

var totalIssues = args.chart.chartWidth[i].redWidth + args.chart.chartWidth[i].yellowWidth + args.chart.chartWidth[i].greenWidth; 
      var red = (args.chart.chartWidth[i].redWidth/totalIssues)*100; 
      var yellow = (args.chart.chartWidth[i].yellowWidth/totalIssues)*100; 
      var green = (args.chart.chartWidth[i].greenWidth/totalIssues)*100; 

      var totalPx = 300; 

      var redWid = (red/100) * 500; 
      var yellowWid = (yellow/100) * 500; 
      var greenWid = (green/100) * 500; 


      console.log("Red Width : " + redWid + "Yellow Width : "+ yellowWid+ "Green Width : "+greenWid); 
      content += "<div class=\"project-data\"><div class=\"box-container"+i+"\"><div class=\"box"+i+" red" +i+ "\"></div><div class=\"box"+i+" yellow" +i+ "\"></div><div class=\"box"+i+" green" +i+ "\"></div></div></br>"; 
      content += "<style type=\"text/css\"> "; 
      content +=".box-container"+i+"{ margin: 50;}"; 
      content +=".box"+i+"{float: left; width:150px; box-shadow:3px 3px 2px #666767; height:20px;}"; 
      content += ".red" +i+" { width: " + redWid + "px; background-color:#ff0000; }"; 
      content += ".yellow"+i+" { width: " + yellowWid + "px; background-color:#ffff00; }"; 
      content += ".green"+i+" { width: " + greenWid + "px; background-color:#00ff00; }";  
      content += "</style> </br>";