Html 将hml代码中的每个数字增加整数X

Html 将hml代码中的每个数字增加整数X,html,editor,Html,Editor,我有一个静态HTML页面,在图像上放置了许多表单字段。我现在得到了一张新的图片,每个字段都向下移动了3倍 如何在文件中多选所有“top:xyz”标记并向每个标记添加3个?根据我的需要,我目前正在使用notepad++、sublime和phpstorm,但我很乐意为此下载另一个 示例字段可能如下所示: <input [disabled_customer_0_Nr] class="basic inputfield" type="text" id="input_customer_0_Nr" ta

我有一个静态HTML页面,在图像上放置了许多表单字段。我现在得到了一张新的图片,每个字段都向下移动了3倍

如何在文件中多选所有“top:xyz”标记并向每个标记添加3个?根据我的需要,我目前正在使用notepad++、sublime和phpstorm,但我很乐意为此下载另一个

示例字段可能如下所示:

<input [disabled_customer_0_Nr] class="basic inputfield" type="text" id="input_customer_0_Nr" tabindex="13" value="[customer_0_Nr_Value]" title="" name="customer_0_Nr" style="position: absolute;left: 365px;top: 772px; height: 19px; width: 125px;">


好了

将此JQuery代码应用于html文件,它将为您完成其余的工作

$('.inputfield').css('top', '+='+3 +'px');

$('.dropdownfield').css('top', '+='+3 +'px');

inputfield和dropdownfield是您的输入标记类

那么,这个案例应该由脚本来涵盖,最有可能的是围绕它的可用工具的JavaScript。但是,我是一个懒惰的人,我爱你。以下是我的解决方案: 你可以用它来帮助你。 以您的用例为例:

  • 所有字段均以“顶部:”开头:
  • 您有不同的值,每个值从2到4位不等
假设:我希望您在每个“top:xyz”后面都有一个带有单个空格的height属性。如果不是这种情况,下面的命令将没有帮助

安装VSCode后,使用Ctrl+Shift+p打开文件检查是否存在,然后键入Emmet。如果你能在那里找到命令,我们就没事了。现在:

  • 使用鼠标选择一个“顶部:”按钮
  • 使用Ctrl+D选择重复项
  • 使用右箭头将光标移动到“顶部:”前面
  • 点击一些空格并写出“3+”
  • 点击Escape返回单光标模式
  • 现在使用鼠标在随机的“top:3+xyz”前面选择一个“px;h”
  • 使用Ctrl+D选择重复项
  • 使用左箭头向后移动光标
  • 使用Shift+左箭头(“3+xyz”)选择所有数字
  • 按Ctrl+Shift+P打开命令菜单并键入“数学”
  • 选择“Emmet:计算数学表达式”并按Enter键

    在那里,奇迹发生了。Emmet将计算数值表达式并用结果值替换它


  • PS:另一种解决方案是使用CSS
    calc()
    而不是提供静态值。

    你能举个例子吗?所有的“top:xyz”都有三个degit吗?他们有不同的价值观吗?如果它们都有三个degit,我可以在vscode中帮助您使用一些快捷方式。不幸的是,它们都有两到四个数字,因此也有不同的值。它们没有太多相似之处,除了它们与top:和left:的放置方式不同:编辑您的问题并将示例代码张贴在此处编辑我的问题此解决方案对于我提出的问题非常有效!但是,我需要在代码本身中实现这种神奇的效果,而不是在代码之后,因为只有少数字段在+3下看起来不太好,而在+2或+4下会更好。通过这种方式,我可以重新计算所有这些问题,并手动修复剩下的几个问题。除此之外,还有非常棒的leightweight解决方案!
    $('.inputfield').css('top', '+='+3 +'px');
    
    $('.dropdownfield').css('top', '+='+3 +'px');