Javascript不继承样式

Posted

技术标签:

【中文标题】Javascript不继承样式【英文标题】:Javascript not inheriting style 【发布时间】:2018-01-24 19:23:37 【问题描述】:

怎么了堆栈!我在公司网站上实施的 javascript 表单存在重大问题。问题是表单没有从样式表继承任何东西。我们所有的公司网站都是使用 wordpress 构建的。对于这个特定的网站,我们使用带有子主题的 divi 主题进行自定义。我有他们在 ftp 上调用的所有 javascript 文件和 php 文件,并且表单本身工作得很好,但它在视觉上完全是一团糟。我最终在另一个没有 divi 的测试环境中设置了相同的表单,并且表单最终被设计为与正在使用的不同主题相匹配。所以我知道问题出在 divi 上,但是有没有人对如何在仍然使用 divi 的同时获得这种形式的样式有任何建议?

这里是相关网站的 URL:http://www.haines.com/university/

在选择课程下,当您单击任何课程中的日期链接时,将打开表单。

【问题讨论】:

Broken Javascript Form Pic - 应该是Broken JavaScript in post(在帖子中包含您的代码,而不是图片)。 代码不是坏的。代码工作正常,但 Divi 阻止了表单的样式。因此无需发布表单的代码。该表单在任何其他 wordpress 主题中都可以很好地设置样式,除了 Divi。 A url or form + css sn-p 会帮你得到答案,不能修复我们看不到的东西 我在问题中添加了指向该站点的链接。我希望这会有所帮助! 欢迎来到 ***。 有关使用该网站的一些提示:您应该已经研究过您的问题并包括您尝试解决它的方法,包括Minimal, Complete & Verifiable example。请re-read the Stack Overflow tour,然后阅读How much research effort is expected of Stack Overflow users和How to ask a good question 【参考方案1】:

好的,这里发生了一些事情。我看到您仍在积极更改代码,因此目前可能并非全部适用。

首先,您正在重复使用 ID。你不能那样做; id 是唯一的,如果不是,则会导致问题。将 studentclasssignup 改为一个类。

其次,当您想要输入样式时,您将 css 放在 div 上。你想要 div 的孩子的 css。如果您更改为班级,您可以像这样设置孩子的样式:

.studentclasssignup > input <whatever>

或者有一个 id 它会是:

#studentclasssignup > input <whatever>

但同样,不要重复使用 ID。

【讨论】:

老兄,非常感谢。一旦你这么说,它就为我点击了,我能够弄清楚如何在我的自定义 css 表单中设置类。我现在正在为这个吸盘设计风格!谢谢!【参考方案2】:

据我所知,您的模板在其 CSS 中使用了动态类。例如:

.hs-form-c0074a25-1641-462d-8731-7da7bc52f872_06f8c9b0-accf-40a3-a90d-65b583641897 .hs-button
    border:none;
    font-family:Helvetica,Arial,sans-serif;
 

这意味着你不能重复使用他们的风格,除非你知道如何检索这种 id。

在这种情况下,最简单的方法应该是复制/粘贴您想要的 CSS,然后将其应用到您的表单中:

.registercontainer button 
    border:none;
    font-family:Helvetica,Arial,sans-serif;
 

这应该针对您需要的每种样式(输入、标签等)完成

【讨论】:

以上是关于Javascript不继承样式的主要内容,如果未能解决你的问题,请参考以下文章

如何引用带有连字符的 JavaScript 对象属性?

如何引用带有连字符的 JavaScript 对象属性?

JavaScript 创建DIV 设置样式不起作用,很多都是因为设置样式的顺序问题

JavaScript之继承(原型链)

JavaScript之继承(原型链)

JavaScript继承基础讲解,原型链借用构造函数混合模式原型式继承寄生式继承寄生组合式继承