Question

我正在我的网站上制作一幅画布，你可以画画。为了达到这个效果，每次鼠标移动时，我都会在鼠标位置绘制一个fillRect。 Everithin工作正常但是当我尝试添加背景图像时，它隐藏了一切。我尝试使用canvas.drawImage();

然后我发现你可以使用：background:url(pic1.jpg);

从CSS添加背景图像

这样可以正常工作，但是我不希望图像来自加载，而是在用户单击按钮时加载。 Anny Idea怎么做？我可以像使用HTML一样从Java调用CSS，还是有其他方式。谢谢你的回答

Answer 1

您可以使用JavaScript以编程方式设置定义背景的CSS。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="add"
        android:text="button" />

</RelativeLayout>

确保使用要设置背景图像的实际HTML元素更改元素。

Answer 2

您可以使用HTML DOM执行此操作，如下面的代码

<button type="button" 
 onclick="document.getElementById('id').style.backgroundImage = "url('image.png')"">
Click Me!</button>

Answer 3

你需要这样的东西：

处理事件（在点击示例中）
将新的css属性附加到元素目标

function appendImg() {
  document.getElementById('result').style.backgroundImage = 'url(http://4.bp.blogspot.com/-Q13U4dlElI8/VSW78iey57I/AAAAAAAAI7k/HO3zYPaRYso/s1600/img_john_lennon2-500.jpg)';
}

#result {
  width: 500px;
  height: 400px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  visibility: visible;
}

<button onclick="appendImg()">Imagine</button>
<hr>
<div id="result"></div>

Html你可以从javascript运行css代码吗？

3 个答案: