javascript - 如何使用 jQuery 或 CSS 设置提交按钮第一个单词的样式

Question

我需要使用 jQuery 或 CSS 为提交按钮中的第一个/最后一个词设置样式。

代码如下:

input.wpcf7-form-control.wpcf7-submit {
font-weight: 700;
}

   <div id="btnDiv" class="btnDiv"> <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit"></div>

我想把第一个字的字体粗细改成浅色，可以吗？

请注意:我无法更改我的 HTML 代码。这是一个 WordPress 网站。来自名为“Contact Form 7”的插件的提交按钮。

Answer 1

如果您提供的代码段的父元素为 id那么你可以只使用下面的脚本。

这将取代 <input>与 <button>然后应用其他答案。

document.getElementById('btnDiv').innerHTML = '<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text">SUBMIT</span> REQUEST</button>';

.sub-text{
  font-weight : 700;
}

<div id="btnDiv" class="btnDiv"> 
  <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit">
</div>

或者，如果使用 jQuery，您可以改用它:

$('#btnDiv').html('<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text">SUBMIT</span> REQUEST</button>');

.sub-text{
  font-weight : 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btnDiv" class="btnDiv"> 
  <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit">
</div>