当前位置: 首页 > 面试题库 >

是否有一种简单的方法可以在不重新加载页面的情况下重新加载CSS?

芮化
2023-03-14
问题内容

我正在尝试使用预览功能制作一个活页内CSS编辑器,该功能将重新加载样式表并应用它,而无需重新加载页面。最好的方法是什么?


问题答案:

在“编辑”页面上,不要以常规方式(带有<link>标签)包括CSS,而是将其全部写入<style>标签。编辑的innerHTML属性将自动更新页面,即使没有往返服务器的访问。

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

使用jQuery的Javascript:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

就是这样!

如果您真的想花哨的话,请将功能附加到textarea的keydown上,尽管您可能会得到一些不良的副作用(键入时页面会不断变化)



 类似资料:
  • 我有一个用户名列表,用户名列表根据用户输入的数量而增加。问题是,当用户输入用户名时,列表会被输入填充,只有当我的页面重新加载时,我的页面才会更新。这是我迄今为止尝试过的代码。 我无法在外页重新加载的情况下更新数据。请建议我如何更新ui:在外页重新加载的情况下重复数据。提前谢谢。

  • 问题内容: 有没有办法可以在不重新加载页面的情况下修改当前页面的URL? 如果可能,我想访问#哈希 之前 的部分。 我只需要更改域 后 的部分,所以就好像我没有违反跨域策略一样。 问题答案: 现在,可以在Chrome,Safari,Firefox 4+和Internet Explorer 10pp4 +中完成此操作! 例: 然后,您可以用来检测后退/前进按钮的导航:

  • 在我的网站,我正在尝试加载产品项目而不刷新整个页面。我通过和设法做到了这一点。然而我遇到了一个问题。产品项包含单个图像。但由于我将间隔设置为3秒,它会重新下载所有需要的资源,我认为这是一个问题,因为连接速度慢的用户会感到恼火。我在开发工具上模拟了一个慢速连接,只是想看看会发生什么。 这就是结果。重新加载图像或整个product_item页面需要时间。 这是我的密码 现在我想知道什么是高效加载数据的

  • 问题内容: 转到任何GitHub 页面,然后单击任何目录/文件,并观察URL的更改方式,但仅更新页面的一部分。没有整个页面重新加载。 我如何使用jQuery做类似的事情? 这对大多数浏览器都有效吗(我使用的是Chrome)? 问题答案: 他们使用历史记录API,或者专门使用。 您可以使用它,不需要jQuery,但是有一些插件,例如history.js。 这适用于大多数浏览器,即Chrome,Saf

  • 问题内容: 有没有办法可以在不重新加载页面的情况下修改当前页面的URL? 如果可能,我想访问#哈希 之前 的部分。 我只需要更改域 后 的部分,所以就好像我没有违反跨域策略一样。 问题答案: 现在,可以在Chrome,Safari,Firefox 4+和Internet Explorer 10pp4 +中完成此操作! 有关更多信息,请参见此问题的答案: 使用新URL更新地址栏而不散列或重新加载页面

  • 问题内容: 我有一个带有php include的Div Tag,该div用来填充该信息,我想要做的是使它每隔15秒调用一次,以便它可以在那里更新信息,而不必重新加载整个网页。我试图用JavaScript / jQuery做到这一点,但似乎无法正常工作 这是我在搜索一些内容后所拥有的,然后发生的是,它加载了Small.php,但不会每15秒刷新一次或更新信息。 请帮忙! 我应该添加所有应显示的php