如何找到父div的类答案

【问题标题】：how to find the class of parent div如何找到父div的类
【发布时间】：2021-11-04 22:00:13
【问题描述】：

这是我当前的画布大小及其在col-sm-6 内。但是我想显示如果在col-sm-12 引导类和col-sm-6 和col-sm-12 中使用更大的画布从后端动态生成，所以我必须知道画布是否在 col-sm-6 中或 col-sm-12 以便我可以将越来越小的宽度设置为画布

第一个较小的画布：可能是 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
  );
}

【问题讨论】：

if (document.querySelector('.col-sm-12')) 将被实现，只要页面上有一个具有该类的元素 anywhere，这并不一定意味着它被包裹在你的画布上。先上到父节点，然后检查是否有类。 developer.mozilla.org/en-US/docs/Web/API/Node/parentNode, developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains
但如果后端同时创建列和画布元素 - 那么您也可以将所需的信息添加到画布元素本身，例如通过自定义数据属性。然后，您可以直接从该元素中读取它，而无需先向上导航。
我这样做是为了得到 col-sm-12 或 col-sm-6 $(document).ready(function(){ alert(document.getElementById('canvas-id').parent( ).attr(".class")); // 没用 });
那是因为你在那里混合了原生 DOM 和 jQuery 语法。 getElementById 获取对 HTLMElement 对象的引用，这与 jQuery 实例不同。如果您现在真的想切换到 jQuery（但是为什么，到目前为止您显示的代码是 vanilla JS），然后使用 $() 选择元素；否则，使用我提到的 DOM 属性和方法。
您能否将问题中的代码转换为有效的 sn-p，因为目前事情不匹配 - 画布的 id，它们真的设置不同吗？

标签： javascript html css canvas bootstrap-4

【解决方案1】：

您的代码中有错字：“cxt.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>

【讨论】：

感谢@ceving，但我需要一个响应式画布。当您制作小型浏览器时，画布内的图像会被隐藏。有没有更好的解决方案让它根据浏览器宽度做出响应
也许 canvas.width = 800;画布.高度 = 400;正在制造问题
@David 你必须使用resize event。
如果你能在上面的代码中显示调整大小事件就好了。谢谢
@David 这已经是answered。或者，您可以使用Viewport-percentage lengths 为您的画布设置样式。有关示例，请参见 here。