javascript - 如何在保持其功能的同时更改字体按钮的外观？

Question

我在我的网站上有一个 typeform 测验的链接，使用他们在此处提供给定说明的代码:http://helpcenter.typeform.com/hc/en-us/articles/200065866-Overview-of-embedding-options (我用的是从侧面滑出的弹出式抽屉样式)

我想在链接上使用我的 css 样式来匹配我站点的其余部分，但更改类似乎会破坏某些东西。当我将链接上的类(class)更改为

如何在不失去功能的情况下更改按钮的外观？

这是我使用 typeform 类时的样子，typeform + 我的，我单独使用: http://i.imgur.com/scOdjqc.png

代码如下:

<a 
    class="typeform-share"
    href="https://mysite.typeform.com/to/url"
    data-mode="2"
    target="_blank">
        Take quiz now!
</a>
<script>
(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)}})()
</script>

编辑:添加了显示我玩类时发生的情况的图像。

Answer 1

您应该能够添加自己的类，然后覆盖通过 https://s3-eu-west-1.amazonaws.com/share.typeform.com/share-button 设置的样式.css 自动包含的样式表。

或者，您可以更改脚本以不包含链接的默认样式表，方法是删除(从缩小且不可能读取的脚本中)if(!gi.call(d,id )){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d ,'head')[0];s.appendChild(qs,s)} 所以你的嵌入代码最终变成这样:

(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()