如何找到父div的类

Question

这是我当前的画布大小，它在col-sm-6内。但是我想要显示如果是在col-sm-12引导类和col-sm-6和col-sm-12更大的画布从后端动态生成，所以我必须知道画布是否与col-sm-6或者col-sm-12，这样我就可以将大小宽度设置为canvas

第一个较小的画布:可能是500*400

<div class="s-field col-sm-6">
<label class="control-label mb5">first canvas image </label>
<canvas  id="canvas-id-1" class="image-canvas"></canvas>
</div>

第二个应该是更大的画布:可以是800*400

<div class="s-field col-sm-12">
<label class="control-label mb5">second canvas image </label>
<canvas  id="canvas-id-2" class="image-canvas"></canvas>
</div>

let canvas = document.getElementById('canvas-id');
let ctx = canvas.getContext("2d");
//here if i know that canvas is within  class col-sm-12 I can set dimension 800*400
if (document.querySelector('.col-sm-12')) {
canvas.width = 800;
canvas.height = 400;
//otherwise I will make small canvas 
} else {
canvas.width = 500
canvas.height =400
}
var image = new Image();
image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';
image.onload = function () {
var ctx = canvas.getContext('2d');
ctx.drawImage(image,
canvas.width / 2 - image.width / 2,
canvas.height / 2 - image.height / 2
);
}

Answer 1

你的代码中有一个错别字:" ext . drawimage "而不是"ctx.drawImage"

for (let canvas of document.querySelectorAll ('.image-canvas')) {
let ctx = canvas.getContext("2d");
if (canvas.parentNode.classList.contains('col-sm-12')) {
canvas.width = 800;
canvas.height = 400;
} else {
canvas.width = 500
canvas.height = 400
}
let image = new Image();
image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';
image.onload = function () {
ctx.drawImage (image,
canvas.width / 2 - image.width / 2,
canvas.height / 2 - image.height / 2
);
}
}

canvas {
border: 1px solid black;
}

<div class="s-field col-sm-6">
<label class="control-label mb5">first canvas image </label>
<canvas  id="canvas-id-1" class="image-canvas"></canvas>
</div>
<div class="s-field col-sm-12">
<label class="control-label mb5">second canvas image </label>
<canvas  id="canvas-id-2" class="image-canvas"></canvas>
</div>