确定X轴上对象大小的属性。此测量的最常见形式是像素或毫米。
我有一个表格标题的宽度（以像素为单位）。单击函数时，我需要将像素转换为百分比。 我有一个表格标题的宽度（以像素为单位）。单击某个函数后，我需要将像素转换为百分比。 <th field="Column1" id="Column1" noresize="true" width="100px"> <label id="Column1" onclick="getCustomGridColName(this.id,'inner__fghgh');" style="cursor:pointer; font-family: Times; font-size:12pt;"> Column1 </label> </th> 百分比是相对值。 使用像100px这样的一个值，你无法得出百分比。 您需要具有像 screenWidth 这样的相对值（假设）1366px，以便您可以获得该值的百分比。 var pixels = 100; var screenWidth = window.screen.width; var percentage = ( screenWidth - pixels ) / screenWidth ; // 0.92% //Transform pixel in percentage /* - totalpx: Total of pixels depending on the width or height, could be 1920.0 or 1080.0, 1280.0 or 720.0, etc... respectively. - px: the pixel desidered to be converted. - ItIsHeight: boolean to know if is axis x or y ot make the correct calculation. - BaseOfConversionWidth & BaseOfConversionHeight: the base of conversion from the original pixel are take it, if the design is HD ready then will be 1280.0 and 720.0, if is full HD then will be 1920.0 and 1080.0, etc... */ public Double TransformPercentage(Double Totalpx, Double px, boolean ItIsHeight, double BaseOfConversionWidth, double BaseOfConversionHeight) { if (ItIsHeight) return (px / BaseOfConversionHeight) * Totalpx; else return (px / BaseOfConversionWidth) * Totalpx; } 在 JavaScript 中，有多种方法可以将鼠标移动 deltaX 计算为屏幕宽度的百分比。以下是几种方法，并附有解释和注意事项： 方法一：使用window.innerWidth 此方法使用 window.innerWidth 来获取屏幕宽度。它简单明了，但它没有考虑滚动条或客户区域（可见屏幕）和全屏尺寸之间的差异。 let previousX = null; window.addEventListener('mousemove', (event) => { if (previousX !== null) { const deltaX = event.clientX - previousX; const screenWidth = window.innerWidth; const percentX = (deltaX / screenWidth) * 100; console.log(`Delta X: ${deltaX} pixels, Percentage: ${percentX.toFixed(2)}%`); } previousX = event.clientX; }); 方法二：使用document.documentElement.clientWidth（更准确） 此方法使用 document.documentElement.clientWidth，通常认为对于获取可见浏览器窗口的宽度更可靠。它不太容易受到滚动条和其他浏览器元素引起的问题的影响。 let previousX = null; window.addEventListener('mousemove', (event) => { if (previousX !== null) { const deltaX = event.clientX - previousX; const screenWidth = document.documentElement.clientWidth; const percentX = (deltaX / screenWidth) * 100; console.log(`Delta X: ${deltaX} pixels, Percentage: ${percentX.toFixed(2)}%`); } previousX = event.clientX; }); 重要注意事项： 初始previousX： previousX变量初始化为null。 这很重要，因为在第一个鼠标移动事件中，没有之前的位置可供比较。 第一个事件用于设置初始previousX。 event.clientX: event.clientX属性提供鼠标指针相对于视口（可见浏览器窗口）的水平坐标。 这是用于计算屏幕百分比的正确值。 滚动条：即使document.documentElement.clientWidth在所有布局非常复杂或滚动条非常大的情况下也可能不完全准确。 如果您在异常情况下需要像素完美的精度，则需要更复杂的方法。 高精度： .toFixed(2)方法将百分比四舍五入到小数点后两位。根据您的应用程序的精度要求进行调整。 使用方法： 将此 JavaScript 代码包含在您的 HTML 文件中，最好位于 <script> 末尾的 <body> 标记内，或链接到 HTML 的单独 .js 文件中。 在网络浏览器中打开 HTML 文件。 移动鼠标，您将看到 deltaX（以像素为单位）及其占屏幕宽度的百分比记录到浏览器的控制台。 请记住选择最适合您特定应用的准确性和复杂性要求的方法。 对于大多数情况，document.documentElement.clientWidth 提供了简单性和准确性的良好平衡。
使用 CSS 时画布会被拉伸，但使用 `width` 和 `height` 属性时则正常
我有 2 个画布，一个使用 HTML 属性宽度和高度来调整大小，另一个使用 CSS： 我有 2 个画布，一个使用 HTML 属性 width 和 height 来调整大小，另一个使用 CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1 按其应有的方式显示，但 compteur2 不显示。内容是使用 JavaScript 在 300x300 画布上绘制的。 为什么会有显示差异？ 看起来 width 和 height 属性决定了画布坐标系的宽度或高度，而 CSS 属性只决定了显示它的框的大小。 这在 HTML 规范中进行了解释： canvas元素有两个属性来控制元素位图的大小：width和height。这些属性在指定时必须具有“有效的非负整数”值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值返回错误，则必须使用默认值。 width 属性默认为 300，height 属性默认为 150。 要在画布上设置 width 和 height，您可以使用：canvasObject.setAttribute('width', '150'); canvasObject.setAttribute('height', '300'); 对于 <canvas> 元素，width 和 height 的 CSS 规则设置将绘制到页面的画布元素的实际大小。另一方面， width 和 height 的 HTML 属性设置画布 API 将使用的坐标系或“网格”的大小。 例如，考虑这个（jsfiddle）： var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30); canvas { border: 1px solid black; } <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> <canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 两者都相对于画布元素的内部坐标绘制了相同的东西。但在第二个画布中，红色矩形的宽度将是原来的两倍，因为 CSS 规则将整个画布拉伸到更大的区域。 注意：如果未指定 width 和/或 height 的 CSS 规则，则浏览器将使用 HTML 属性来调整元素的大小，以使这些值的 1 个单位等于页面上的 1px。如果未指定这些属性，则它们将默认为 width 为 300 和 height 为 150。 如果您在 CSS 中设置宽度和高度，画布将被拉伸。如果你想动态操纵画布的尺寸，你必须使用 JavaScript，如下所示： canvas = document.getElementById('canv'); canvas.setAttribute('width', '438'); canvas.setAttribute('height', '462'); Shannimal修正 var el = $('#mycanvas'); el.attr('width', parseInt(el.css('width'))) el.attr('height', parseInt(el.css('height'))) Canvas 通过缓冲区渲染图像，因此当您指定宽度和高度 HTML 属性时，缓冲区的大小和长度会发生变化，但当您使用 CSS 时，缓冲区的大小不会改变。使图像拉伸。 使用 HTML 调整大小。 画布大小更改 -> 缓冲区大小更改 -> 渲染 使用 CSS 调整大小 画布大小已更改 -> 渲染 由于缓冲区长度保持不变，当上下文渲染图像时， 图像显示在调整大小的画布中（但在未更改的缓冲区中渲染）。 CSS 设置画布元素的宽度和高度，因此它会影响坐标空间，使绘制的所有内容倾斜 这是我如何使用 Vanilla JavaScript 设置宽度和高度的方法 canvas.width = numberForWidth canvas.height = numberForHeight var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30); canvas { border: 1px solid black; } <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> <canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 如果您想要基于例如的动态行为CSS 媒体查询，不要使用画布宽度和高度属性。使用 CSS 规则，然后在获取画布渲染上下文之前，将 CSS 宽度和高度样式分配给宽度和高度属性： var elem = document.getElementById("mycanvas"); elem.width = elem.style.width; elem.height = elem.style.height; var ctx1 = elem.getContext("2d"); ... 我相信 CSS 有更好的机制来指定画布的大小，并且 CSS 必须决定样式，而不是 JavaScript 或 HTML。话虽如此，在 HTML 中设置宽度和高度对于解决画布问题非常重要。 CSS 具有 !important 规则，允许覆盖属性的其他样式规则，包括 HTML 中的规则。通常，它的使用是不受欢迎的，但这里的使用是合法的hack。 在 WebAssembly 的 Rust 模块中，您可以执行以下操作： fn update_buffer(canvas: &HtmlCanvasElement) { canvas.set_width(canvas.client_width() as u32); canvas.set_height(canvas.client_height() as u32); } //.. #[wasm_bindgen(start)] pub fn start() -> Result<(), JsValue> { // ... let canvas: Rc<_> = document .query_selector("canvas") .unwrap() .unwrap() .dyn_into::<HtmlCanvasElement>() .unwrap() .into(); update_buffer(&canvas); // ... // create resizing handler for window { let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| { let canvas = canvas.clone(); // ... update_buffer(&canvas); // ... window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?; on_resize.forget(); } } 一旦加载 WASM 模块，然后每当调整窗口大小时，我们就会更新画布缓冲区。我们通过手动将画布的 width 和 height 指定为 clientWidth 和 clientHeight 的值来完成此操作。也许有更好的方法来更新缓冲区，但我相信这个解决方案比 @SamB、@CoderNaveed、@Anthony Gedeon、@Bluerain、@Ben Jackson、@Manolo、@XaviGuardia、@Russel Harkins 和 @fermar 建议的解决方案更好因为 该元素由 CSS 设计样式，而不是 HTML。 与 @Manolo 使用的 elem.style.width 和 elem.style.height 技巧或 @XaviGuardia 使用的 JQuery 等效项不同，它将适用于 canvas，其大小通过使用指定为 flex 或 grid 项目。与@Russel Harkings 的解决方案不同，这也可以处理调整大小。虽然我喜欢他的回答，因为它真的很干净、简单。 WASM 是未来！哈哈：D 附注有很多 .unwrap() 因为 Rust 明确地处理了可能的失败。P.P.S. { let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| { let canvas = canvas.clone(); // ... update_buffer(&canvas); // ... window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?; on_resize.forget(); } 使用更好的库可以做得更干净。例如 add_resize_handler(&window, move |e: ResizeEvent| { let canvas = canvas.clone(); // ... update_buffer(&canvas); })
我正在使用 Ubuntu Linux 将大量原始数据转换为图像文件。在宽度不超过 1,000,000 像素（含 1,000,000 像素）时可以正常工作。超过此值，例如 1,000,001，我收到错误： libpng 警告：图像宽度超出...
如何使用 Tailwind CSS 设置超过 100% 的宽度
我需要将 div 宽度设置为 110%，但这对于 Tailwind CSS 来说似乎不可能。 他们的文档仅指定 100% 的值。 班级 特性 W-全 宽度：100%；
“auto”是 HTML 属性“height”和“width”的有效值吗？
auto 是 HTML 属性 height 和 width 的有效值吗？ 请提供可靠的来源。我无法找到有信誉的消息来源说是或否（即专门解决这个问题...
我正在开发一个具有固定宽度 div 布局的 Drupal 网站。所有东西都排成一行等等，但由于某种原因，整个东西比应有的宽大约 15px。宽度应该是 900px 但是...
我正在使用Python开发一个基于文本的小型控制台游戏。因为我使用了一些 ASCII 艺术，所以我必须确保游戏启动后每个人的控制台宽度都相同。可以
我的iframe是style="width:100%"的样式，它几乎覆盖了页面宽度。但它在左侧和右侧留下了一个小边距。所以我添加了 body { margin:0px; } 删除空格。 它有效...
我的网格可以有不同高度的单元格内容，每行三个单元格，行高会增长以匹配最高的单元格内容，但不应低于网格宽度的1/3（基本上意味着......
如何设置 Tkinter Entry 小部件的宽度（以像素为单位）？
我注意到 Tkinter 条目小部件的宽度参数以字符为单位，而不是像素。 是否可以调整像素宽度？
Get.height 和 Get.width 在发布模式下第一次打印 0.0？
我正在为我的项目使用 Getx 状态管理。当使用 setState((){}) 刷新屏幕后第一次构建小部件时，Get.width 和 Get.height 打印 0.0，它打印实际的
我正在 Drupal 中的一个页面上工作，表格中的文本被截断。为了使文本可见，我认为我需要更改表格的宽度，但我不知道该怎么做...
我有一个项目，UI 顶部有一排按钮。紧凑视图中显示五个按钮，常规视图中显示六个按钮。当应用程序以 1/3 分割运行时，我想删除一个按钮...
我有一个项目，UI 顶部有一排按钮。紧凑视图中显示五个按钮，常规视图中显示六个按钮。当应用程序以 1/3 分割运行时，我想删除一个按钮...
我的整个网页太宽了，对于上下文来说，我试图制作一个网页，一侧有一个表单，另一侧有一个图像，并且它必须在两个 div 下。 到目前为止我已经尽了最大努力来找到一个
我一直在尝试使用 ggplot2 绘制以下数据，但遇到了错误栏问题： 数据1<-c(0.04, 0.5, 1.0, 1.5 ,2.0, 2.6, 3.1, 3.6, 0.9,0.56,0.4,0.33,0.27,0.2,0.15,0.1, 0.1...
我试图覆盖 PrimeVue 中密码组件的默认宽度，但它不起作用。 **我尝试使用以下 CSS 覆盖宽度： ** .p-密码输入 { 宽度：1...
即使宽度和高度设置为 100%，对话框元素也不会调整为全屏或整个屏幕
在编写项目代码的过程中，我决定将自己创建的弹出窗口更改为对话框标签。但后来我遇到了一个问题，即使...
在我的例子中，孩子的号码是从服务器端返回的。如果孩子少于 6 个，我需要添加虚拟孩子来代替父母的左边。 例如 ： 1种有两个气的情况...
尝试使其响应时背景颜色会缩小，我还想在调整大小时将我的项目居中，无法弄清楚
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400; 0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&