主页 / user-957186

klewis's questions

Martin Hope
klewis
Asked: 2024-09-04 03:18:38 +0800 CST
  • 7

如果我有一个预定义的字符串值数组，如何通过 querySelectorAll 和 textContent 查看它们是否存在于 DOM 中？


//my array of predefined string values
let primaries = ["house", "people", "cat", "dog"];

let mTable = document.querySelectorAll("#mytable td font");

这就是我被困住的地方...我想从中找到任何字符串primaries。mTable如果找到任何字符串值，则执行特定操作（即console.log("I found you")）；

这是我目前所拥有的，但它一次只能对一个元素起作用。我该如何扩展我的思维过程呢？

var mPrimary = Array.from(
  mtable.querySelectorAll("td font")
).find((el) => el.textContent === "house");
if (mPrimary) {
  mPrimary.closest("tr").classList.add("d-none");
}
javascript
Martin Hope
klewis
Asked: 2024-05-24 00:30:25 +0800 CST
  • 5
根据官方Bootstrap指南中展示的示例，使用边框类时调整边框宽度大小似乎很容易... ```html ``` 但如果我们只想使用底部边框，例如... ```html ``` 我们如何利用这些相同的尺寸选项呢？ 我能在我的自定义.scss文件中写些什么来扩展utilities.scss文件（node_modules/bootstrap/scss/mixins/_utilities.scss），以允许底部边框有不同的边框大小吗？ 我尝试了 ```css $utilities: map-merge( $utilities, ( "border-width": ( property: border-width, class: border, values: $border-widths ) ) ); ``` 和 ```css $utilities: map-merge($utilities, ("border-width": map-merge(map-get($utilities, "border-width"), (values: ( 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px, ), )))); ``` 但当与`border-bottom`一起使用时，没有效果。 但即使我找到了解决方案...在utilities.scss文件中的以下Bootstrap规则有一个重要的语句应用到它的规则上... ![enter image description here](https://isstatic.askoverflow.dev/FFkkN8Vo.png) 有没有办法解决这个问题？ 我能想到的唯一办法是如果我们设置一个switch case（SASS map）或多个if else语句过程来改变`--bs-border-width`的值，这取决于类的名称...？我完全不知道。
sass
Martin Hope
klewis
Asked: 2023-11-16 23:39:59 +0800 CST
  • 5

我生成了 css 文件的副本，将副本的扩展名从 更改为.css，.html还添加了<style>元素来环绕 css 规则。以下是结果...我知道这一切听起来不合理，但这是我针对特定 Google 应用程序所需的“有意”格式。

以下是复制的文件，现在是一个名为 page-css.html 的 HTML 文件

<style>
html body {
  border: solid 1rem blue;
}
html body .form-row {
  margin-bottom: 15px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2UtY3NzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0k7RUFDSTs7QUFFQTtFQUNJIiwiZmlsZSI6InBhZ2UtY3NzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImh0bWwge1xyXG4gICAgYm9keSB7XHJcbiAgICAgICAgYm9yZGVyOiBzb2xpZCAxcmVtIGJsdWU7XHJcblxyXG4gICAgICAgIC5mb3JtLXJvdyB7XHJcbiAgICAgICAgICAgIG1hcmdpbi1ib3R0b206IDE1cHg7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59Il19 */
</style>

如何使用 Gulp 从该文件中删除整个源映射字符串以使其消失？

我努力了...

  • gulp-decomment
  • gulp 字符串替换
  • 吞下条评论

都以相似的方式...


const htmlmin = require('gulp-htmlmin');
const decomment = require('gulp-decomment');
const replace = require('gulp-string-replace');
const strip = require('gulp-strip-comments');

...

  //example 1
  .pipe(decomment({trim: true}))
  //example 2
  .pipe(htmlmin({ removeComments: true }))
  //example 3
  .pipe(strip())

...但是这些包都无法用于替换/删除整个源映射行...

我考虑过使用gulp-string-replace，但我找不到任何关于如何删除特殊字符及其之间的任何内容的学习点。（例如/*#, *, */, ' '）。

以下是我通过 gulp 尝试完成此过程的尝试。但即使使用gulp-replace（greplace如下所示），它也不会删除源映射行......

完整的 Gulp 代码示例




function genCSS(done) {
  return (
    src(paths.styles.src)
      .pipe(gulpif(!GPREP, sourcemaps.init({})))
      .pipe(sass().on("error", sass.logError))
      .pipe(
        gulpif(
          !GPREP, sourcemaps.write({
            addComment: true,
          })
        )
      )
      //CSS FILE WITH ITS SOURCEMAP IS READY FOR LOCAL DEV PURPOSES
      .pipe(dest(paths.styles.dest))

      //BEGIN THE COPIED/CONVERTED HTML FILE FOR GOOGLE APP PURPOSES
      .pipe(
        rename(function (path) {
          if (path.basename === "page-css") {
            path.extname = ".html";
          }
        })
      )
      .pipe(header("<style>\n"))
      .pipe(footer("</style>\n"))
      //ATTEMPTING TO REMOVE THE SOURCEMAP - BUT IT DOES NOT WORK...
      .pipe(greplace(/\/\*# sourceMappingURL[^\n]+\n/gm,''))
      //STORE THE FILE IN A CLASP LOCATION TO PUSH UP TO GOOGLE
      .pipe(dest(paths.styles.apps))
      .pipe(msync.stream())
  );
  done();
}

非常感谢这个学习过程！

gulp