如何計算方塊px的值？

酒吧= 500像素，紅色框= 1，黃色盒= 1，綠盒子= 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代碼：

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

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

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

從這我想要計算紅色框，黃色框和綠色框的px框的寬度。

來源

2016-11-16 Arun Kumar Mk

你的意思是在這種情況下，Redbox的寬度應該是25％，黃色-25％和綠色50％？ –

這取決於框的大小（內容框，邊框）以及您想要的邊距和填充。 – gus27

@ArunKumarMk問題不明確。你需要分享一些代碼。你的* PX *只是元素的「高度和寬度」。 –

您可以使用JQuery找到以下方法的寬度。

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

來源

2016-11-16 08:48:03 ketan

我做出了HTML和CSS一些變化，因爲它似乎並沒有爲我工作，但here是正確的PX一個的console.log值。

<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();

來源

2016-11-16 08:53:06

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

來源

2016-11-16 08:53:56

我做了簡單的計算並設置寬度的數值。

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>";

來源

2016-11-16 12:38:59

如何計算方塊px的值？

回答

相關問題