简体繁体 English

使用JS或CSS更改HTML布局？

[英]HTML layout changes with JS or CSS?

原文 2018-02-08 07:07:12 9 3 javascript/ html/ css

Should I change HTML layouts with JS or CSS? 我应该用JS或CSS更改HTML布局吗？

I see a lot of use of CSS display hiding or showing elements dependent on media queries. 我看到很多使用CSS显示隐藏或显示依赖于媒体查询的元素。 Maybe hidden duplicate HTML that appears in a different location on mobile. 也许隐藏在移动设备上不同位置的重复HTML。 A hidden mobile menu. 隐藏的移动菜单。 Etc etc 等等

But with JS i can have one layout that "morphs" dependent of screen width. 但是对于JS，我可以有一个“变形”依赖于屏幕宽度的布局。 No hidden duplicate markup, just moving HTML around. 没有隐藏的重复标记，只是移动HTML。

Is this not a good idea? 这不是个好主意吗？

3 个解决方案

Programatic changes on the layout will depend on the robustness and performance of your JS code. 布局的编程更改将取决于JS代码的健壮性和性能。

CSS changes depends of the browser's and it's more efficient for sure. CSS更改取决于浏览器，并且肯定会更有效。

About the enviroment's measure you can act upon them with css media-querys. 关于环境的措施，你可以用css媒体查询对他们采取行动。

You should not forget, that some browsers/users disable JavaScript for security-reasons. 你不应该忘记，一些浏览器/用户出于安全原因禁用了JavaScript。 You should use CSS where it is possible. 您应该尽可能使用CSS。 So your Website can be viewed in all Browsers. 因此，您的网站可以在所有浏览器中查看。

If you have to change some styling dynamically, and there are no CSS-alternatives, javascrpit might be the right choice. 如果你必须动态改变一些样式，并且没有CSS替代品，javascrpit可能是正确的选择。

It really depends on what you want to do, if it's basic animations, then css is here for you, if it's more advanced animations, then you should use JS, as other users said, keep in mind that some users disable JavaScript for security reasons, but i think they don't exeed 5% of the users , here's some links to help you find out what's best for your use of css or JS : 这真的取决于你想做什么，如果它是基本的动画，那么css就在这里，如果它是更高级的动画，那么你应该使用JS，正如其他用户所说，请记住，一些用户出于安全原因禁用了JavaScript ，但我认为他们没有占用5％的用户，这里有一些链接可以帮助你找到最适合你使用css或JS的东西：

Myth Busting: CSS Animations vs. JavaScript 神话喧嚣：CSS动画与JavaScript
CSS Versus JavaScript Animations CSS与JavaScript动画

For media queries, here's an answer that respond to your question. 对于媒体查询，这是一个回答您的问题的答案。 With the media queries, you won't have to hide anything, you will use a different CSS code for the same part of the HTML, but with different CSS attributes only for mobile/responsive use 使用媒体查询，您不必隐藏任何内容，您将对HTML的相同部分使用不同的CSS代码，但仅针对移动/响应使用具有不同的CSS属性

For the SEO, here's and experiment that shows that googleBots crawl the Js without problem. 对于SEO，这里和实验表明googleBots抓住Js没有问题。

Edit : if you're able to use some server side language(php, asp...), use CSS for the design part, and the server side language for the other things, and only Javascript when you find it usefull. 编辑：如果你能够使用一些服务器端语言（php，asp ...），请使用CSS作为设计部分，使用服务器端语言作为其他内容，只有当你发现它有用时才使用Javascript。 if you can do something with the CSS instead of JS, then do it with the CSS. 如果你可以用CSS而不是JS做一些事情，那么用CSS做吧。